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

我目前正在使用javascript和JQuery构建自定义控件，并且我有以下功能。为什么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礼”元素的元素的ID属性是用来选择从父输入的选项。我已验证'值'变量正在填充正确的数据，并且正在达到函数本身，但出于某种原因未选择该选项。出了什么问题？

来源

2012-05-21 William Calleja

您能不能告诉'$（父）'声明？ – Murtaza

您也不需要遍历每个项目以附加单击事件。你可以简单地做'$（'＃comboBoxData li'）。bind（'click'[...]）;' –

这是否适合你？ http://jsfiddle.net/s6DfL/5/谢谢 –

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

通过它的外观，你想有一个以上的select列表impliment这种增强。此外，由于这是一个增强，我相信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.

来源

2012-05-21 12:14:08

在你的HTML例子组合框不是<ul>父元素。您需要使用jQuery的prev()方法返回到之前的兄弟，在本例中是您的选择框。

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

编辑：

忘记你的点击事件绑定到每个li，这样你就需要parent()选择第一则prev()选择去组合框

来源

2012-05-21 10:37:00

嗨，请问$（this）.prev（'select'）'选择'select'标签或者你需要指定'$（this）.parent（'ul'）。prev（'select'）'??请让我知道，因为我也给完整的位置来选择我的DOM中的元素 – Murtaza

@Murtaza请看看我的编辑，你仍然需要使用'parent（）'选择器。我的错误:( –

）我知道我们提到选择器非常具体..否则它从来没有选择正确的元素。看到你的答案我以为你错了，但我对我的话没有信心，所以证实你 – Murtaza

可能是你parent识别码错误。这个工作对我来说：

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

http://jsfiddle.net/6PJdU/

来源

2012-05-21 10:38:37 Samich

我道歉，我使用'parent'作为变量名称，而不是实际的父类型（），这肯定会让很多人困惑，实际上，'parent'变量存储对元素的引用 –

我不是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。

来源

2012-05-21 10:40:33

尝试下面的代码，你会看到它的工作原理：

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

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

来源

2012-05-21 10:49:04 turankonan

我道歉，作为一个变量名称，而不是实际的父类型（），这必然会让很多人感到困惑，实际上，'父'变量存储对元素的引用 –

特别感谢詹姆斯·阿勒代斯和杰米·狄克逊。以下标记修正了我的问题：

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

来源

2012-05-21 11:57:15

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

回答

相关问题