Question

我目前正在使用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'变量填充了正确的数据并且函数本身正在被访问，但由于某种原因，该选项未被选中。出了什么问题？

Answer 1

尝试以下代码，您会发现它有效：

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

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

Answer 2

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

根据它的外观，您希望有多个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);
});

以及从ul项目构建select的基本功能：

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

        return "<ul>" + listElements + "</ul>";
}

现在，您可以简单地为要增强的select元素提供类名（class="selectEnhance"）

Here's a working example.

Answer 3

HTML示例中的组合框不是<ul>的父元素。您需要使用jQuery的prev()方法返回上一个兄弟，在这种情况下是您的选择框。

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

修改

忘记将点击事件绑定到每个li，这样您首先需要parent()选择器，然后prev()选择器才能进入组合框

Answer 4

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

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

http://jsfiddle.net/6PJdU/

Answer 5

我不是jQuery专家，但逻辑对我来说有点不对劲。在我的头顶（需要检查属性选择器，这可能会使它复杂化）这可能会帮助你进步......

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

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

Answer 6

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

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

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

6 个答案: