单击列表框中的元素时获取该元素的id

Getting the id of the element when click on that element in the list box

本文关键字：元素 获取 id 列表 单击      更新时间：2023-09-26

我有一个下拉列表，当我点击下拉列表中的项目时，我的列表框中会填充一组与从下拉列表中选择的项目相关的项目。。现在，当我从列表框中选择一个项目时，我想获取它的ID。我的所有数据都来自json。。p救命！！

$(document).ready(function() {
    $.ajax({
        url: "DATA.JSON",
        dataType: "json",
        success: function(obj) {
            console.log("obj--", obj)
            var jsObject = obj;
            var usedNames = [];
            $('<option>', {
                text: 'Select your Option',
                value: '',
                selected: 'selected',
                disabled: 'disabled',
                location: 'fixed'
            }).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);
                }
            });
            $('#dropdown1').change(function() {
                $('#listbox').toggle(this.value != "");
            });
            $('#dropdown1').change(function() {
                $('#listbox').empty();
                $('<option>', {
                    text: 'Select your List Option',
                    value: '',
                    selected: 'selected',
                    disabled: 'disabled'
                }).appendTo('#listbox');
                var selection = $('#dropdown1 :selected').text();
                console.log("as".selection);
                $.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;
                    }
                    var selectedOption = $(this).find('option:selected');
                    console.log(selectedOption);
                });
            });
            $("#listbox").on("click", function() {
                console.log("asd", $('#listbox').attr('data-val'));
                $( "#listbox" ).delegate( "td", "click", function() {
                    $( this ).toggleClass( "chosen" );
                });
            })
        }
    });
});

更改这行代码

optionHtml += '<option value="' + attr + '">' + value[attr] + '</option>';

至

optionHtml += '<option value="' + attr + '" id="'+ attr+'">' + value[attr] + '</option>';

更改此代码块

$("#listbox").on("click", function() {
  console.log("asd", $('#listbox').attr('data-val'));
  $( "#listbox" ).delegate( "td", "click", function() {
      $( this ).toggleClass( "chosen" );
  });    
});

至

 $( "#listbox" ).on( "click", "option", function() {
    $( this ).toggleClass( "chosen" );
    alert($(this).attr('id')); // this is just for demo to get the id of the clicked option.
 });

需要注意的几点。

1） 您的#listbox根本没有td元素。它只有<option>标签。因此，更改脚本以触发此选项上的单击事件。

2） 每次单击#listbox时，您都会将单击事件绑定到td（可能是option），这将导致您绑定多个事件，从而导致失败。

3） 使用.on()选择器而不是.delegate。.delegate()已被弃用，到目前为止，它在大多数移动浏览器中都不起作用。

您传递的参数顺序不正确：

.delegate( "td", "click", function() {

您应该首先分配点击事件，然后分配选择器：

$( "#listbox" ).delegate(  "click", "td", function() {
     $( this ).toggleClass( "chosen" );
});

您还应该在列表框单击函数中使用e.stopImmediatePropagation。

建议：您应该使用on方法，而不是委托方法。

相关文章：