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

回答

相关问题