jQueryで選択したオプションをターゲットにする

Question

デフォルトで選択されている「選択」以外のオプションを選択したときに警告を表示したいと思います。選択したオプションに価値があるかどうかを確認しようとしましたが、これは機能しません。これは私が持っているもので、HTMLへのアクセス権がありません：これはあなたがselectのchangeイベントにフックし、選択された値をチェックする必要があります達成するために

if (jQuery('#select_1 option').val()) { 
 
    jQuery('#select_1').append('<span>you selected an option</span>'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="select_1"> 
 
<option value>choose</option> 
 
<option value="111">1</option> 
 
<option value="112">2</option> 
 
<option value="113">3</option> 
 
</select>

Answer 1

を。

option〜select以外の要素はappend()できません。ロード時にはspanをDOMに格納しておく方がよいでしょう。その後、toggle()それが選択した値、このような何かに基づいてすることができます

$('#select_1').change(function() { 
 
    $('#alert').toggle(this.value !== ''); 
 
});

#alert { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="select_1"> 
 
    <option value="">choose</option> 
 
    <option value="111">1</option> 
 
    <option value="112">2</option> 
 
    <option value="113">3</option> 
 
</select> 
 

 
<span id="alert">you selected an option</span>

Answer 2

あなたはすべてのオプションを選択している、選択したオプションを選択していません。その後、.val()は最初の値を返します。

オプションの値を取得する代わりに、選択したオプションの値である<select>の値を取得します。

$("#select_1").change(function() { 
 
    if (this.value) { 
 
    $("#output").append('<span>you selected an option</span>'); 
 
    } else { 
 
    $("#output").empty(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="select_1"> 
 
    <option value>choose</option> 
 
    <option value="111">1</option> 
 
    <option value="112">2</option> 
 
    <option value="113">3</option> 
 
</select> 
 
<div id="output"></div>

また、あなたは#select_1にメッセージを追加するべきではありません。 <select>の内容は、<option>と<optgroup>のみである必要があります。

Answer 3

次のように動作します。私は$(select).val()を使用しましたが、オプション要素にはval()を使用していません。

$('#select_1').on('change', function(){ 
 
    if($(this).val().trim() === ''){ 
 
    alert('Please select a value!'); 
 
    } else { 
 
    alert('You selected value:' + $(this).val()); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="select_1"> 
 
    <option value>choose</option> 
 
    <option value="111">1</option> 
 
    <option value="112">2</option> 
 
    <option value="113">3</option> 
 
</select>

Answer 4

あなたはこの試みることができます。

$(document).ready(function() { 
 
    $("#select_1").change(function(){ 
 
     if($('#select_1').val() != '') { 
 
      var text = $('#select_1 :selected').text(); 
 
      var value = $('#select_1 :selected').val(); 
 
      $('#appendDiv').append("<br><span>You selected an option with text:" + text + " and value: " + value + "</span>"); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="select_1"> 
 
    <option value="">-- Choose --</option> 
 
    <option value="111">1</option> 
 
    <option value="112">2</option> 
 
    <option value="113">3</option> 
 
</select> 
 
<div id="appendDiv"> </div>