jQuery的空（）阻止選擇

前段時間我張貼了這個問題，詢問如何獲取JSON數據到jQuery的下拉菜單 jquery dropdown from mysql based on previous selection jQuery的空（）阻止選擇

那麼這裏的人是真棒，我得到了一個解決方案。我現在面臨的問題是，建議的解決方案在我的生產環境中不起作用，但它在我的測試中有效。

爲了防止重複主題我使用jQuery empty()問題是，使用empty()似乎也阻止我選擇第一個選項。

這是從JSON

function(data){ 

      var select = $('[name="employee_manager"]'); 
      select.empty(); 
      select.append(new Option(ucfirst('No Manager'),'100')); 

      $.each(data, function(index, array) { 

        select.append(new Option(ucfirst(array['first_name'])+ " "+ucfirst(array['last_name']),array['id'])); 
      });

生成optiosn的功能是一種替代空的（），將不能防止選擇？

編輯這似乎僅是一個問題，如果有少於兩個項目是動態輸入
EDIT 2這裏是HTML。看來，我無法選擇第一個選項，如果empty()存在

 <label for="manager">Reports To</label> 
    <select name="employee_manager"> 
      <option value="1">Please Select Employee Role</option> 
      <option value="2">John Doe</option> 
      <option value="3">James Smith</option> 
    </select>

編輯3

貌似空類是添加一個跨度來我選擇

<div class="selector"> 
<span style="-moz-user-select: none;">Jane Smith</span> 
    <select name="employee_manager" style="opacity: 0;"> 
     <option value="100">No Manager</option> 
</select> 
</div>

編輯4
好吧，所以這裏是一個jsfiddle顯示問題。我無法正確加載JSON數據，但如果您嘗試點擊列表中的第一項，仍然可以看到問題。看來，彷彿均勻去除它不是一個問題 http://jsfiddle.net/BandonRandon/xXUfp/1/

來源

2011-03-20 BandonRandon

你所說的 '選擇' 意思？我的代碼中沒有看到「選擇」一個元素。 – Kevin 2011-03-20 07:55:43

對不起，我更新了問題，以包括正在做選擇的HTML。 – BandonRandon 2011-03-20 08:14:24

看起來像'data'是ajax響應，什麼類型是'data'？ JSON？ – 2011-03-20 08:19:56

不要使用empty()明確的下拉列表中的選項它與uniformjs問題。這是錯誤的，因爲它應該被用來刪除DOM孩子。

而是使用這樣的代碼：

$("select[name='employee_manager'] > option").remove();

編輯：當使用了jQuery插件uniform，動態添加選項是搞亂事情了......周圍的一個方法，不需要去嘗試修復插件總是要有足夠的「虛擬」選項（例如，如果這是最大選項數量，則爲20），然後根據您的數據更改這些選項的文本/值並隱藏所有其他選項。
正確的JS代碼現在看起來像這樣：

var myData = []; 
myData.push({ text: "Please Select A Manager (JS)", value: "null" }); 
myData.push({ text: "No Manager", value: "100" }); 
myData.push({ text: ucfirst("a third choice"), value: "42" }); 
$.each(data, function(index, array) { 
    myData.push({ text: ucfirst(array['first_name'])+ " " + ucfirst(array['last_name']), value: array['id'] }); 
}); 

$("select[name='employee_manager'] > option").each(function(index) { 
    if (index < myData.length) { 
     $(this).text(myData[index]["text"]); 
     $(this).val(myData[index]["value"]);       
     $(this).show(); 
    } 
    else { 
     $(this).hide(); 
    } 
});

更新jsFiddle。

原油，但工作.... :)

來源

2011-03-20 08:27:56

由於某些原因，我的移除存在同樣的問題。我認爲這是一個CSS問題。我將選中的類添加到跨度。請參閱上面的編輯3。 – BandonRandon 2011-03-20 08:37:56

@BrandonRandon以及別忘了檢查螢火蟲 – 2011-03-20 08:39:54

@experimentX我正在檢查螢火蟲，這是我如何認爲它是增加跨度。沒有JS錯誤。不知道還有什麼需要尋找或爲什麼要添加跨度。 – BandonRandon 2011-03-20 08:41:02

那麼嘗試這樣的事情，但不保證一定

$('<option></option>').val(100).html('No Manager').appendTo($(select)); 

$.each(data, function(index, array) { 
    $('<option></option>').val(array['id']).html(ucfirst(array['first_name'])+ " "+ucfirst(array['last_name']).appendTo($(select)); 
});

來源

2011-03-20 08:29:22

這仍然是重複所有字段。你也忘了'''，但我解決了這個問題。 PS，它是「BandonRandon」而不是「BRandonRadon」:) – BandonRandon 2011-03-20 08:46:46

@BandonRandon對不起，因爲我沒有測試過它。祝你好運...哎呀！必須再次編輯。 – 2011-03-20 08:49:22

jQuery的空（）阻止選擇

回答

相關問題