Question

这里是jQuery的新手，所以我很感激任何提示。

我有三个下拉菜单，当用户选择并点击下一步时，我需要获取每个选项的值。

我在想......

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

但我不知道如何使用.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

你很亲密。

尝试：

$( '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());
});

使用jQuery：当用户从下拉列表中选择时，如何获取选项值

4 个答案: