3

私はjQuery 用に選択したプラグインを使用して気に入っていSELECTますが、特定のクラスを持つアプリケーション内のすべてのクエリに使用する共通のスクリプトを作成しようとしています。問題は、アクティブな Chosen 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'
});

どんな助けでも大歓迎です。

これが、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を作成しましたが、正しく作成したかどうかはわかりません。何か違うことをする必要がある場合はお知らせください。

4

2 に答える 2

1

まず第一に、select のクラスは である必要があります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 に答える