jQuery「選擇」插件選擇下拉列表 - 獲取ID

我正在使用chosen plugin爲jQuery和喜歡它，但我正在嘗試創建一個通用腳本，用於我的應用程序中具有某個類的所有SELECT查詢。問題是我想獲得激活的選擇選擇的ID。以下是我的jQuery代碼。jQuery「選擇」插件選擇下拉列表 - 獲取ID

$("SELECT.editable").chosen({ 
    create_option: function (term) { 
     var chosen = this; 
     chosen.append_option({ 
      value: term, 
      text: term 
     }); 
     var tableField = $(this).attr('id'); // <<<< HERE IS THE ISSUE. I am trying to get the ID of the select to pass to the jQuery post as a paramter. It comes back as undefined. 
     alert(tableField); 
     var params = { optionValue: term, tableField: tableField }; 
     var paramsStr = $.param(params); 
     var actionUrl = '/Setup/_addDropDownOption'; 
     $.post(actionUrl, paramsStr); 
    }, 
    persistent_create_option: false, 
    create_option_text: 'Add Option' 
});

任何幫助，將不勝感激。

這是來自View Source的我的HTML代碼。

<div> 
<select class="editable" id="tblContacts.Prefix" name="Prefix"> 
<option selected="selected" value="Mr.">Mr.</option> 
<option value="Ms.">Ms.</option> 
<option value="Mrs.">Mrs.</option> 
<option value="Mr. and Mrs.">Mr. and Mrs.</option> 
<option value="Miss.">Miss.</option> 
<option value="Mr. and Dr.">Mr. and Dr.</option> 
<option value="Dr. and Mrs.">Dr. and Mrs.</option> 
<option value="Dr.">Dr.</option> 
</select> 
<span class="field-validation-valid" data-valmsg-for="Prefix" data-valmsg-replace="true"></span> 
</div>

我創建了一個jsfiddle，但我不知道我是否做得對。讓我知道如果我需要做一些不同的事情。

來源

2012-08-30 Shawn

您能否顯示您的html的相關部分請。 –

甚至更好，建立一個jsfiddle;） – kannix

在「var chosen = this;」之後立即設置一個斷點。將鼠標懸停在所選內容上，並查看當時如何定義它。此外，你應該能夠使用$（選擇）而不是$（this）。 – WEFX

首先，您選擇的班級應爲chosen-select。就像這樣：

<select class="chosen-select editable" id="tblContacts.Prefix" name="Prefix"> 
    <option selected value="Mr.">Mr.</option> 
    <option value="Ms.">Ms.</option> 
    <option value="Mrs.">Mrs.</option> 
    <option value="Mr. and Mrs.">Mr. and Mrs.</option> 
    <option value="Miss.">Miss.</option> 
    <option value="Mr. and Dr.">Mr. and Dr.</option> 
    <option value="Dr. and Mrs.">Dr. and Mrs.</option> 
    <option value="Dr.">Dr.</option> 
</select>

另外，如果你想遍歷一組元素，jQuery::each來得心應手。所以腳本是：

// create all the chosen-selects 
$(".chosen-select").chosen(); 

// iterate over all the .editable selects 
$('select.editable').each(function() {  
    var chosen = $(this); 
    var selected_option = chosen.find(':selected').val();   
    var select_id = chosen.attr('id'); 

    alert('The ID you are looking for is "' + select_id + '"'); 
    alert('The selected option is "' + selected_option + '"'); 

    // append element 
    var option = "<option value='whatever_value'>Whatever</option>"; 
    chosen.append(option); 
    // refresh the chosen-select 
    chosen.trigger('chosen:updated');   
});

這裏的JSFiddle。
請確保您包含所選插件之外的jQuery。

來源

2016-04-14 12:51:55 Dacklf

它應該是一個簡單的情況下修改您的代碼的一行，以使其工作。您正在使用的已選擇的jQuery插件的作者似乎對以下修改感到滿意，我在遇到類似問題時使用了這種修改：documented here。

$("SELECT.editable").chosen({ 
    create_option: function (term) { 
     var chosen = this; 
     chosen.append_option({ 
      value: term, 
      text: term 
     }); 
     // *** I modified the following line *** 
     var tableField = chosen.form_field.id 
     // *** End of modification *** 
     alert(tableField); 
     var params = { optionValue: term, tableField: tableField }; 
     var paramsStr = $.param(params); 
     var actionUrl = '/Setup/_addDropDownOption'; 
     $.post(actionUrl, paramsStr); 
    }, 
    persistent_create_option: false, 
    create_option_text: 'Add Option' 
});

來源

2016-04-18 15:44:13 w5m

jQuery「選擇」插件選擇下拉列表 - 獲取ID

回答

相關問題