javascript - JQuery 選択値を変数に

Question

私は隅々まで調べましたが、このコードが機能しない理由がわかりません。

http://jsfiddle.net/kCLxJ/

ドロップダウンが値「3」または「4」に設定されている場合、別のフィールドがドロップダウン リストの下に表示されます。何か案は？

Answer 1

jsフィドル

これを変える：

var val = $('#event_options_id option:selected').html();

に ：

var val = $('#event_options_id').val();

Answer 2

固定作業バージョン

.val()まず、指摘されたように電話する必要がありました。

var val = $('#event_options_id option:selected').val();

次に、使用しているセレクターに基づいてparseInt()、val で使用して、そのような数値にする必要があります

if ($.inArray(parseInt(val,10), arr) > -1) {

配列を定義するときに余分なコンマもありました。

完全な作業コード

$(document).ready(function() {

    $('#event_options_id').change(function() {

        $('.container_add_form').remove();

        var val = $('#event_options_id option:selected').val();
        var arr = [3, 4];

        if ($.inArray(parseInt(val,10), arr) > -1) {
            $('<input type="hidden" name="age_required" id="age_required" value="yes" /><div class="container_add_form"><p class="text_content">Please enter your age for grouping purposes.<br /><input name="age" type="text" id="age" size="3" /></p></div>').fadeIn('slow').appendTo('.add_form');
        }
    });
});​

Answer 3

1)オプションの値を取得する.val()代わりに使用します。.html()

2) 文字列値を配列内の数値と比較していますが、これは常に失敗します。

http://jsfiddle.net/kCLxJ/4/

var val = $('#event_options_id option:selected').val();
var arr = ['3', '4'];

Answer 4

これらの行を変更します。

    var val = $('#event_options_id option:selected').val();
    var arr = ["3", "4"];

コンボボックスの値を取得するには、「html()」の代わりに「val()」を使用する必要があります。そして、配列の要素を文字列に変更する必要があります。変数 val は文字列です。inArray は、要素を整数ではなく文字列として検索しようとします。

Answer 5

コードを更新しました: http://jsfiddle.net/kCLxJ/7/

$(document).ready(function() {

    $('#event_options_id').change(function() {

        $('.container_add_form').remove();

        // you used .text() but should've used .val()
        var val = $('#event_options_id option:selected').val();
        var arr = [3, 4];

        /*
            another problem was that you didn't parse the value into an integer
            but you were comparing the value to an array of integers
        */
        if ($.inArray(parseInt(val), arr) > -1) {
            $('<input type="hidden" name="age_required" id="age_required" value="yes" /><div class="container_add_form"><p class="text_content">Please enter your age for grouping purposes.<br /><input name="age" type="text" id="age" size="3" /></p></div>').fadeIn('slow').appendTo('.add_form');
        }
    });
});