Jquery：从一组下拉框中，从选定的下拉框

Question

我有很多带有不同ID的下拉框。

$("select").change(function(e) {
  alert($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <select id='priceType1' name='priceType1'>
        <option value='SRP'>SRP</option>
        <option value='DP'>DP</option></select>
    </td>
  </tr>

  <tr>
    <td>
      <select id='priceType2' name='priceType2'>
            <option value='SRP'>SRP</option>
            <option value='DP'>DP</option></select>
    </td>
  </tr>

  <tr>
    <td>
      <select id='priceType3' name='priceType3'>
            <option value='SRP'>SRP</option>
            <option value='DP'>DP</option></select>
    </td>
  </tr>
</table>

现在，每当我从adrop中选择一个选项时，我将如何获得所选值。我已经尝试了下面的代码，但它无法正常工作。我需要在jquery中执行此操作，因为我希望在获取所选值后有一个ajax代码。

Answer 1

这是工作代码。已将on()与change一起使用。您可以获取所选值以及所有3个选择下拉列表的值。：

＆＃13;

＆＃13;

$("select").on('change', function() {
  console.log('Selected Value' + $(this).val());
  $("select option:selected").each(function(k, v) {
    console.log('Option ' + k + ' Value: ' + $(this).val());
  })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <select id='priceType1' name='priceType1'>
    <option value='SRP'>SRP</option>
    <option value='DP'>DP</option></select>
    </td>
  </tr>

  <tr>
    <td>
      <select id='priceType2' name='priceType2'>
        <option value='SRP'>SRP</option>
        <option value='DP'>DP</option></select>
    </td>
  </tr>

  <tr>
    <td>
      <select id='priceType3' name='priceType3'>
        <option value='SRP'>SRP</option>
        <option value='DP'>DP</option></select>
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

Your code is correct but add select box change event written in document ready function ? that is the mistake.

JQuery的

<script>
$(document).ready(function(){

    $("select").change(function(e){
        alert($(this).val());
    });

});
</script>