爲什麼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選項選擇不起作用

回答

相關問題