1

我目前正在使用 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 属性用于从父输入中选择一个选项。我已经验证了“值”变量正在填充正确的数据，并且正在访问函数本身，但由于某种原因未选择该选项。出了什么问题？

4

6 回答 6

2

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

$('#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-21T10:49:04.587 回答
1

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

从外观上看，您希望有多个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")

这是一个工作示例。

于 2012-05-21T12:14:08.617 回答
0

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

$('#comboBoxData').on('click', 'li', function() {
    var value = $(this).prop('id');
    $(parent).val(value);
});
于 2012-05-21T11:57:15.253 回答
0

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

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

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

于 2012-05-21T10:40:33.140 回答
0

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

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

编辑：

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

于 2012-05-21T10:37:00.207 回答
0

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

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

​http://jsfiddle.net/6PJdU/

于 2012-05-21T10:38:37.193 回答