使用 jQuery 從表單中獲取選定的值

Question

我有一個表單，它有一個像這樣定義的選擇字段

myName[] 之所以這樣，是因為報名表有多次重復（用戶先定義他要輸入多少，然后生成那么多表）

現在我想在選擇 somethign 時使用 jQuery 獲取所選值，但正如預期的那樣，它不起作用：它試圖從一個 id 獲取信息，並且這個 id 不止一個。 結果是它總是使用它找到的 id 獲取第一個選擇字段的內容。 我嘗試將 id 更改為一個類，但這沒有用。

那么如何獲取實際觸發事件的選擇框的選定值呢？

 $(document).ready(function() { $('#idOfmyName').change(function() { var naam = $(this).find("option:selected").attr('value'); alert(naam); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select name="myname[]" id="idOfmyName"> <option value="jack">Jack</option> <option value="rose">Rose</option> </select>

Answer 1

如果您想要選定的元素，為什么不能只使用$(this).val() ？

但是是的，當您有多個相同的 ID 時，jQuery 將永遠選擇它找到的第一個 - 盡管您似乎確實知道這一點； 我在這個演示中把它改成了一個類

 $(document).ready(function() { $('.idOfmyName').on('change', function() { alert($(this).val()); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select name="myname[]" class="idOfmyName"> <option value="jack">Jack</option> <option value="rose">Rose</option> </select> <select name="myname[]" class="idOfmyName"> <option value="harry">Harry</option> <option value="sally">Sally</option> </select> <select name="myname[]" class="idOfmyName"> <option value="edward">Edward </option> <option value="vivian">Vivian </option> </select>

Answer 2

對於多個你可以做這樣的事情

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <select name="myname[]" class="idOfmyName">
    <option value="jack">Jack</option>
    <option value="rose">Rose</option>
  </select>
 <select name="myname[]" class="idOfmyName">
 <option value="jack">Jack</option>
  <option value="rose">Rose</option>
 </select>
 <script>
  $(document).ready(function() {
     var names = [];
     $('.idOfmyName').change(function() {
    var naam = $(this).find("option:selected").attr('value');
    if($.inArray(naam,names)){
       names.push(naam);
    }
    alert(names);
  });
});
</script>

Answer 3

使用 onchange 方法獲取選定值的 Vanilla JavaScript 方法

 function getSelectedValue(val) { alert(val); }

 <select name="myname[]" onchange="getSelectedValue(this.value)"> <option value="jack">Jack</option> <option value="rose">Rose</option> </select> <select name="myname[]" onchange="getSelectedValue(this.value)"> <option value="harry">Harry</option> <option value="sally">Sally</option> </select>