動態添加選項

我有以下html結構，並試圖通過javascript在optgroups中添加選項元素。我也在使用jquery移動框架。動態添加選項

的Html如下：

<form> 
    <div class="ui-field-contain"> 
    <label for="selectID">Look-up</label> 
    <select name="select-native-4" id="selectID"> 
     <option>Choose...</option> 

      <optgroup label="G1" id="group1">        
      </optgroup> 
      <optgroup label="G2" id="group2"> 
      </optgroup> 
      <optgroup label="G3" id="group3"> 
      </optgroup> 

      </select> 
     </div> 
    </form>

的JavaScript如下。

for(var i = 0; i < array.length; i++){ 
     var item = array[i]; 
     var $option = $('<option> ' + item.name + ' </option>'); 
     $option.prop('value', item.memb); 
     console.log(item.name); 
     var tp = -1; 
     switch(item.name){ 
      case 'group1' : 
       tp = 1; break; 
      case 'group2' : 
       tp = 2; break; 
      case 'group3' : 
       tp = 3; break; 
     } 
     console.log(tp); 
     //$("#selectID :nth-child(tp)").append($option); 

     $("#selectID").eq(tp).append($option); 
    } 
    $('#selectID').selectmenu('refresh'); 
}

我很困惑，爲什麼.EQ（N）未$選擇對象追加到#selectID的第n個孩子，這將是一個OPTGROUP。謝謝你的幫助！

來源

2014-06-11 randydalton411

發佈整個腳本或小提琴。 –

爲什麼你會期望'.eq（n）'添加到孩子？ '.eq（n）'選擇匹配選擇器的'nnth'元素。 – Barmar

如果你想要第n個孩子，使用'.children（）。eq（n）'。 – Barmar

您只有1 #selectID。您需要：

$('#selectID optgroup').eq(tp).append($option);

這將打擊選擇ID內的optgroups。

來源

2014-06-11 15:16:06 StaticVoid

是完美的。謝謝 – randydalton411

您的代碼附加到Select對象而不是optgroup。

.eq(index)爲您提供與該選擇器匹配的索引對象。在這種情況下，只有一個選擇，所以你不想去得到它。

下面是我將如何處理這個例子。

我會寫這樣的$option定義線。

var $option = '<option> ' + item.name + ' </option>';

代替switch聲明我會把這個。

$("#"+item.name).append($option);

ID對於整個HTML頁面應該是唯一的，所以這應該是唯一具有該ID的組。既然如此，您可以直接將其添加到該optgroup

來源

2014-06-11 15:18:05 Dan

你爲什麼不認爲你可以在變量名中使用'$'？ jQuery一直使用名爲'$'的變量。 – Barmar

這不能引起與JQuerys的'''操作符衝突嗎？ – Dan

只有點符號：$。 – StaticVoid

動態添加選項

回答

相關問題