3

我正在使用为 jQuery选择的插件并且喜欢它，但我正在尝试创建一个通用脚本以用于SELECT我的应用程序中具有特定类的所有查询。问题是我正在尝试获取活动选择的 ID。下面是我的 jQuery 代码。

$("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'
});

任何帮助，将不胜感激。

这是我查看源代码的 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，但我不确定我是否做对了。如果我需要做一些不同的事情，请告诉我。

4

2 回答 2

1

首先，您选择的类应该是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-14T12:51:55.923 回答
0

这应该是修改一行代码以使其工作的简单案例。您正在使用的 Chosen jQuery 插件的作者似乎对以下修改很满意，我在遇到此处记录的类似问题时使用了该修改。

$("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-18T15:44:13.880 回答