jQueryの使用：ユーザーがドロップダウンから選択したときにオプション値を取得する方法

Question

ここにjQueryを初めて追加しました。

私は3回のドロップダウンがあり、ユーザーがそれらを選択して次のステップをクリックすると、各オプションの値を取得する必要があります。

私が考えていた。..

$('selector').click(function(){ 
    $('selector').val(); 
}); 

しかし、私はあなたが近かった

(function($){ 

    $(function(){ 

    $('.dropdown').change(function(event) { 
     alert($('.dropdown option:selected').text()); 
    }); 

    var cta_markup ='<div class="cta">'+ 
         '<div class="caption">'+ 
         '<h3>I need help with'+ 
          '<select class="dropdown">'+ 
           '<option value="value">WITHDRAWAL</option>'+  
           '<option value="value1">DETOX</option>'+ 
          '</select>'+ 
          ' programs for'+ 
          '<select class="dropdown">'+ 
          '<option value="value">PRESCRIPTION DRUGS</option>'+  
          '<option value="value">ALCOHOL</option>'+ 
          '<option value="value2">ILLICT DRUGS</option>'+ 
          '</select>'+ 
          'in'+ 
          '<select class="dropdown">'+ 
          '<option value="value">ALABAMA</option>'+ 
          '<option value="value">ALASKA</option>'+ 
          '<option value="value">ARIZONA</option>'+ 
          '<option value="value">ARKANSAS</option>'+ 
          '<option value="value">CALIFORNIA</option>'+ 
          '<option value="value">COLORADO</option>'+ 
          '<option value="value">CONNECTICUT</option>'+ 
          '<option value="value">DELAWARE</option>'+ 
          '<option value="value">FLORIDA</option>'+ 
          '<option value="value">GEORGIA</option>'+ 
          '<option value="value">HAWAII</option>'+ 
          '<option value="value">IDAHO</option>'+ 
          '<option value="value">ILLINOIS</option>'+ 
          '<option value="value">INDIANA</option>'+ 
          '<option value="value">IOWA</option>'+ 
          '<option value="value">KANSAS</option>'+ 
          '<option value="value">KENTUCKY</option>'+ 
          '<option value="value">LOUISIANA</option>'+ 
          '<option value="value">MAINE</option>'+ 
          '<option value="value">MARYLAND</option>'+ 
          '<option value="value">MASSACHUSETTS</option>'+ 
          '<option value="value">MICHIGAN</option>'+ 
          '<option value="value">MINNESOTA</option>'+ 
          '<option value="value">MISSISSIPPI</option>'+ 
          '<option value="value">MISSOURI</option>'+ 
          '<option value="value">MONTANA</option>'+ 
          '<option value="value">NEBRASKA</option>'+ 
          '<option value="value">NEVADA</option>'+ 
          '<option value="value">NEW HAMPSHIRE</option>'+ 
          '<option value="value">NEW JERSEY</option>'+ 
          '<option value="value">NEW MEXICO</option>'+ 
          '<option value="value">NEW YORK</option>'+ 
          '<option value="value">NORTH CAROLINA</option>'+ 
          '<option value="value">NORTH DAKOTA</option>'+ 
          '<option value="value">OHIO</option>'+ 
          '<option value="value">OKLAHOMA</option>'+ 
          '<option value="value">OREGON</option>'+ 
          '<option value="value">PENNSYLVANIA</option>'+ 
          '<option value="value">RHODE ISLAND</option>'+  
          '<option value="value">SOUTH CAROLINA</option>'+ 
          '<option value="value">SOUTH DAKOTA</option>'+ 
          '<option value="value">TENNESSEE</option>'+ 
          '<option value="value">TEXAS</option>'+ 
          '<option value="value">UTAH</option>'+ 
          '<option value="value">VERMONT</option>'+ 
          '<option value="value">VIRGINA</option>'+ 
          '<option value="value">WASHINGTON</option>'+ 
          '<option value="value">WEST VIRGINIA</option>'+ 
          '<option value="value">WISCONSIN</option>'+ 
          '<option value="value">WYOMING</option>'+ 
          '</select>'+ 
         '</h3>'+ 
         '</div>'+ 
         '<form action="/facility-search/">'+ 
         '<input type="submit" id="btn" value="Next Step">'+ 
         '</form>'+ 

    }); 
})(jQuery); 

Answer 1

）（.val使用する方法がわかりません。

試してみてください。

$('selector').change(function() { 
document.getElementById("selectedoptionvalue").value = $(this).val(); 
document.getElementById("formid").submit(); 
}); 

注：あなたはそれを追加する必要がありますので、あなたのフォームは現在、IDを持っていない

すなわち変更<form action="/facility-search/">も

フォーム<form id="formid" action="/facility-search/">へ変数を渡すためにその内部に入力がないため、次のようなものが必要です。

<input type="hidden" name="selectedoptionvalue" id="selectedoptionvalue" value="">

Answer 2

簡単に選択すると、選択タグにIDが割り当てられます。

<select class="dropdown" id="my-select"> 

nges（もちろんドキュメントの準備ができている必要があります）。

$(document).ready(function(){ 
    $('#my-select').on('change', function(){ 
    $("#my-select").val(); 
    }) 
} 

この操作中に問題がある場合は、私のコメントに返信してください!!

Answer 3

提出する必要がある場合はformタグを正しく使用することはありますか？

cta_markup変数をどこかに追加すると仮定します。
説明としてコード内のコメントを参照してください。あなたがしようとしたものについて

$(document).ready(function(){ // I just prefer this syntax, which is self explanatory 

    $('.dropdown').change(function(event) { 
    alert($('.dropdown option:selected').text()); 
    }); 

    var cta_markup ='<div class="cta">'+ 
        '<form action="/facility-search/">'+ // Place the form open tag here. 
         '<div class="caption">'+ 
         '<h3>I need help with'+ 
          '<select name="firstSelect" class="dropdown">'+ // name attribute added here 
          '<option value="value">WITHDRAWAL</option>'+  
          '<option value="value1">DETOX</option>'+ 
          '</select>'+ 
          ' programs for'+ 
          '<select name="secondSelect" class="dropdown">'+ // name attribute added here 
          '<option value="value">PRESCRIPTION DRUGS</option>'+  
          '<option value="value">ALCOHOL</option>'+ 
          '<option value="value2">ILLICT DRUGS</option>'+ 
          '</select>'+ 
          'in'+ 
          '<select name="thirdSelect" class="dropdown">'+ // name attribute added here 
          '<option value="value">ALABAMA</option>'+ 
          '<option value="value">ALASKA</option>'+ 
          '<option value="value">ARIZONA</option>'+ 

          // ... A couple lines skipped here, for clarity 

          '<option value="value">WEST VIRGINIA</option>'+ 
          '<option value="value">WISCONSIN</option>'+ 
          '<option value="value">WYOMING</option>'+ 
          '</select>'+ 
         '</h3>'+ 
         '</div>'+ 

         '<input type="submit" id="btn" value="Next Step">'+ 
        '</form>'+ 
        '</div>';  // This was missing! 
}); 

は... $('selector').val();$('selector')の値を返します。
あなたはこの権利を持っていました。
しかし、あなたはそれで何かをする必要があります！

と同様に、後で使用するための変数でそれを配置する：

myVariable = $('selector').val(); 

その後コンソールでそれを見てのように使用します。

console.log(myVariable); 

Answer 4

あなたはあなたのため、以下のようなアプローチを使用する必要があります選択入力を作成するためにjavascriptを使用しています。

$(document).on('change', '.dropdown', function(){ 
    // This will give you the option value 
    console.log($(this).val()); 
    // This will give you the option text 
    console.log($(this).find('option:selected').text()); 
});