双击下拉列表中的选定项目
Double click on the selected item in dropdown
我遇到了一个问题,当我从下拉列表中选择一个项目时,列表框不会出现,我需要再次单击下拉列表中的所选项目以显示列表。。这意味着我需要双击下拉列表中的项目。这是我的html
<script>
function ShowHideListBox(e) {
e.stopPropagation()
e.preventDefault()
var IsOpen = $('#listbox').attr('IsOpen')
if (IsOpen == "false") {
ShowList(e)
}
else {
HideList(e)
}
}
function ShowList(elem) {
$('#listbox').attr('IsOpen', 'true')
$('#listbox').show()
}
function HideList(elem) {
$('#listbox').attr('IsOpen', 'false')
$('#listbox').hide()
}
</script>
<form name="myform" id="myForm">
<select id="dropdown1" onclick="return ShowHideListBox(event)"></select>
<select id="listbox" multiple style="display:none; cursor:default;" isopen="false"></select>
</form>
我的js文件
$(document).ready(function() {
$.ajax({
url: "data.json",
dataType: "json",
success: function(obj) {
var jsObject = obj;
var usedNames = [];
$('<option>', {
text: 'Select your Option',
value: '',
selected: 'selected',
disabled: 'disabled'
}).appendTo('#dropdown1');
$.each(obj, function(key, value) {
if (usedNames.indexOf(value.name) == -1) {
$("#dropdown1").append("<option value=" + key + ">" + value.name + "</option>");
usedNames.push(value.name);
}
/* $('<option>', {
text: 'Select your Option',
value: '',
selected: 'selected',
disabled: 'disabled'
}).appendTo('#dropdown1');
*/
//$.each(usedNames, function(index, value) {
// $('<option>', {
// text: value['name'],
// value: index
// }).appendTo('#dropdown1');
//});
/* $('<option>', {
text: 'Select your List Option',
value: '',
selected: 'selected',
disabled: 'disabled'
}).appendTo('#listbox'); */
$('#dropdown1').change(function() {
$('#listbox').empty();
$('<option>', {
text: 'Select your List Option',
value: '',
selected: 'selected',
disabled: 'disabled'
}).appendTo('#listbox');
var selection = $('#dropdown1 :selected').text();
// var selection = $('#dropdown1 :selected').text();
$.each(jsObject, function(index, value) {
if (value['name'] == selection) {
var optionHtml = '';
for (var i = 1; i <= 20; i++) {
var attr = 'attr' + ('000' + i).substr(-3);
optionHtml += '<option value="' + attr + '">' + value[attr] + '</option>';
}
$("#listbox").css("width","500px")
$("#listbox").css("height","300px")
$('#listbox').append(optionHtml); return false;
}
});
});
});
}
});
});
您正在发送事件并将其传递给Showlist
函数你需要发送目标还删除e.stopPropagation(); e.preventDefault()
<script>
function ShowHideListBox(e) {
var IsOpen = $('#listbox').attr('IsOpen')
if (IsOpen == "false") {
ShowList(e.target)
}
else {
HideList(e.target)
}
}
function ShowList(elem) {
$('#listbox').attr('IsOpen', 'true')
$('#listbox').show()
}
function HideList(elem) {
$('#listbox').attr('IsOpen', 'false')
$('#listbox').hide()
}
</script>
<form name="myform" id="myForm">
<select id="dropdown1" onclick="return ShowHideListBox(event)"></select>
<select id="listbox" multiple style="display:none; cursor:default;" isopen="false"></select>
</form>
相关文章:
- 如何在页面加载后禁用下拉列表框项目的选择
- 如何使用jquery将所选项目从一个下拉组列表(optgroup)移动到另一个下拉列表(optgroup)
- 如何在角度js的自动完成下拉列表中对项目列表(按字母顺序)进行排序
- 从下拉列表中获取所选项目,并将其保存到php变量中
- 更改localStorage和下拉列表中的项目值
- 根据下拉列表中选择的项目隐藏所有元素
- 仅在单击下拉列表中的项目时显示列表框
- 双击下拉列表中的选定项目
- 我正试图获得一个带有复选框的多选下拉列表,在填充项目和获得所有选中的工作时遇到了一些问题
- 在复选框取消选中事件中从HTML下拉列表中删除项目
- AngularJS下拉列表在选择项目后丢失内容
- 如何将所选项目从角度 UI 下拉列表发送回角度控制器
- 从下拉列表中的数组中选取某个项目,然后将其显示为第一项并按字母顺序显示
- 检查是否未从下拉列表中选择项目
- 通过下拉列表框上的 appendChild 方法添加的项目不会显示在 IE8 下
- 使用类似 Greasemonkey 的脚本自动选择每页的项目(下拉列表)
- 表单下拉列表(微调器)并尝试将值更改为所选项目值
- 使用 javascript 将项目添加到下拉列表中并保留在回发中
- 所选项目-下拉列表- SQL
- 我可以添加项目下拉列表只有当我点击它(onclick事件)