为什么 jquery 选项选择不起作用

Why is the jquery option selection not working

本文关键字：不起作用 选择 选项 jquery 为什么      更新时间：2023-09-26

我目前正在使用javascript和JQuery构建一个自定义控件，我有以下功能。 

$(document).ready(function() {
    $('select').each(function() {
        var parent = this;
        $('#comboBoxData li').on('click', 'li', function() {
            alert('found');
            var value = $(this).prop('id');
            alert(value);
            $(parent).val(value);
        });
    });
});

下面是标记：

<select style="display:none">
    <option value='1'>1</option>
    <option vlaue='2'>2</option>
</select>
<ul id="comboBoxData">
    <li id='1'>1</li>
    <li id='2'>2</li>
</ul>

我希望当我单击"#comboBoxData li"元素时，元素的 ID 属性用于从父输入中选择一个选项。我已经验证了"value"变量正在填充正确的数据，并且正在访问函数本身，但由于某种原因未选择该选项。出了什么问题？

尝试下面的代码，你会发现它有效：

$('#comboBoxData li').each(function () {
          $(this).bind('click', function () {
          var value = $(this).prop('id');
          $(this).parent().prev("select").val(value);
     });
});

http://jsfiddle.net/quAQm/9/

我一直在看你的代码，并认为我会发布我的版本。

从外观上看，您希望有多个select列表暗示此增强功能。此外，由于这是一项增强功能，我认为应该即时生成ul。这是代码和演示：

$('.selectEnhance').each(function (){
    // Setup
    $selectElement = $(this);
    $selectElement.css("display","none");
    // Build the list
    var $listEnhancement = $(buildListEnhancement($(this)));
    // Attach events
    $listEnhancement.find('li').click({selectElement: $selectElement}, function(event){
       event.data.selectElement.val($(this).text());
    });
    // Insert into DOM
    $(this).after($listEnhancement);
});

以及从select项构建ul的基本函数：

function buildListEnhancement(selectElement)
{
          var listElements = "";
          selectElement.find('option').each(
            function(){
                   listElements += "<li>" + $(this).val() + "</li>";
            });
        return "<ul>" + listElements + "</ul>";
}

您现在可以简单地为要增强的select元素指定一个类名(class="selectEnhance" (

这是一个工作示例。

可能是你的parent识别代码错误。这对我有用：

$('#comboBoxData li').click(function () {
   var value = $(this).prop('id');
   $(this).parent().prev().val(value);
});

http://jsfiddle.net/6PJdU/

我不是jQuery专家，但逻辑对我来说看起来有点不对劲。在我的头顶上(需要检查属性选择器，这可能过于复杂(，这可能有助于您进步......

$("#comboBoxData li").on("click", function(e) {
  var value = $(this).attr("id");
  var option = $(parent).find("option[value='" + value + "']");
  option.attr("selected", "selected");
});

这里的一个关键点是，虽然不一定与您的问题直接相关，但您可以绑定在"一组"元素上，并且不需要循环每个元素来将单个元素绑定到同一事件。重要的是，我认为，我正在做的是显式指定选项的selected属性，而不是指定选择元素的val。

HTML 示例中的组合框不是 <ul> 的父元素。您需要使用 jQuery 的prev()方法返回到前一个同级，在本例中是您的选择框。

$('#comboBoxData li').bind('click', function () {                         
   var value = $(this).prop('id');                         
   $(this).parent().prev().val(value);    
});

编辑：

忘记了将单击事件绑定到每个li，因此您确实需要先使用parent()选择器，然后使用prev()选择器才能进入组合框

特别感谢James Allardice和Jamie Dixon。以下标记解决了我的问题：

$('#comboBoxData').on('click', 'li', function() {
    var value = $(this).prop('id');
    $(parent).val(value);
});
相关文章：