隠し入力フィールドの値は、ドロップボックスの選択に従って変更する必要があります

Question

これは私のスクリプトコードです。それには何か問題があります。

$(function() { 
    $('#type').on('change', function() { 
     if ($('#type').val('Workshop')) 
      $('#color').val('Orange')); 
     else if ($('#type').val('Social')) 
      $('#color').val('Green'); 
     else if ($('#type').val('Other')) 
      $('#color').val('Red')); 

    }); 
}); 

以下は、ドロップボックスと非表示フィールドの形式です。

{!! Form::select('type', array('type' => 'type','Workshop' => 'Workshop', 'Social' => 
    'Social','Other' => 'Other'), 'type', ['id' => 'type']) !!} 
{!! Form::hidden('color','', ['id' => 'color']) !!} 

Answer 1

有効なチェックを行うには、JavaScript関数のコードを更新する必要があります。

if ($(this).val() == 'Workshop') 
    $('#color').val('Orange')); 
... 

Answer 2

あなたは、その後の文字列（「ワークショップ」、「社会」、「その他」）との比較、選択された値を取得するために$(this).val()を使用する必要があり、$('#type').val('Workshop')は#type要素に値Workshopを割り当てます：

$(function() { 
    $('#type').on('change', function() { 
     var selected_option = $(this).val(); 

     if (selected_option == 'Workshop') 
      $('#color').val('Orange')); 
     else if (selected_option == 'Social') 
      $('#color').val('Green'); 
     else if (selected_option == 'Other') 
      $('#color').val('Red')); 

    }); 
}); 

を

これが役に立ちます。

Answer 3

val（ 'Workshop'）は入力の値を変更します。より良いだけでなく、HTMLを追加OPへのアクセスの詳細情報を追加

if (this.value=='Workshop') 
     $('#color').val('Orange')); 

または

 if ($(this).val()=='Workshop') 
     $('#color').val('Orange'));