jquery:输入选择器未选择:选择元素

jquery :input selector not selecting :select elements?

本文关键字：选择 元素 选择器 输入 jquery      更新时间：2024-02-05

我正在尝试使用jQuery迭代一个输入字段表，获取每个值并连接到一个字符串。单击提交按钮后，我想连接:input和:select的输入字段。我读到jquery输入选择器也选择选择字段，但这里的情况似乎并非如此。我尝试过将多个类型传递到find()中，但也不起作用。有什么建议吗？

这是jQuery

 $("#SubmitButton").click(function(){
   var Teams = $(".NewTeam").length;   //working
   event.preventDefault(); 
   alert("clicked lets do ajax");
   for (var i=0; i < Teams; i++){
      $('.NewTeam').eq(i).find('input').each(function () {
        alert(this.value); // "this" is the current element in the loop
      });
   }
});

HTML标记

 <div class = "teams">
    <fieldset class="vfb-fieldset vfb-fieldset-1 str8-sports-roster-upload NewTeam"  style = "display: none">
     <table class = "PlayerInfoTable">
      <tr class = "PlayerRow">
       <td><strong style = "vertical-align:top">Player Info: </strong></td>
       <td><input class="teamInput" name = "player[]" type="text" placeholder="Player Full Name" required/></td>
       <td><input class="teamInput" name = "player[]" type="text" placeholder="Player Number" required/> </td>
       <td><select class="teamInput" name = "player[]" type="text" placeholder="Jersey Size" required/><option selected = "selected">Jersey Size</option><option>Youth Small</option><option>Youth Medium</option><option>Youth Large</option><option>Youth X-Large</option><option>Small</option><option>Medium</option><option>Large</option><option>Extra Large</option> </td>
       <td><select class="teamInput" name = "player[]" type="text" placeholder="Short Size"><option selected = "selected">Short Size</option><option>Youth Small</option><option>Youth Medium</option><option>Youth Large</option><option>Youth X-Large</option><option>Small</option><option>Medium</option><option>Large</option><option>Extra Large</option></select> </td>
       <td><select class="teamInput" name = "player[]" type="text" placeholder="Male/Female" required</select> <option>Male</option><option>Female</option> </td>
      </tr>
     </table>
    </fieldset>
    <fieldset class="vfb-fieldset vfb-fieldset-1 str8-sports-roster-upload NewTeam"  style = "display: none">
     <table class = "PlayerInfoTable">
      <tr class = "PlayerRow">
       <td><strong style = "vertical-align:top">Player Info: </strong></td>
       <td><input class="teamInput" name = "player[]" type="text" placeholder="Player Full Name" required/></td>
       <td><input class="teamInput" name = "player[]" type="text" placeholder="Player Number" required/> </td>
       <td><select class="teamInput" name = "player[]" type="text" placeholder="Jersey Size" required/><option selected = "selected">Jersey Size</option><option>Youth Small</option><option>Youth Medium</option><option>Youth Large</option><option>Youth X-Large</option><option>Small</option><option>Medium</option><option>Large</option><option>Extra Large</option> </td>
       <td><select class="teamInput" name = "player[]" type="text" placeholder="Short Size"><option selected = "selected">Short Size</option><option>Youth Small</option><option>Youth Medium</option><option>Youth Large</option><option>Youth X-Large</option><option>Small</option><option>Medium</option><option>Large</option><option>Extra Large</option></select> </td>
       <td><select class="teamInput" name = "player[]" type="text" placeholder="Male/Female" required</select> <option>Male</option><option>Female</option> </td>
      </tr>
     </table>
    </fieldset>
 </div>

由于您在此处使用了event.preventDefault();，因此应该将$("#SubmitButton").click(function(){更改为$("#SubmitButton").click(function(event){

使用eventHandler时，应该添加一个参数。

在你的HTML中，你也应该做出改变，你使用了选择框，它需要标签，开始和结束，你没有正确地开始和结束标签，这是行

<select class="teamInput" name = "player[]" type="text" placeholder="Male/Female" required</select> <option>Male</option><option>Female</option>

更改为

<select class="teamInput" name = "player[]" placeholder="Male/Female" required><option>Male</option><option>Female</option></select>

此外，您还可以使用类选择器，其中.teamInput在每个元素中都是公共的。

所以你可以很容易地加起来，按照jQuery查看它的工作情况。

$("#SubmitButton").click(function(event){
    event.preventDefault();
    $(".teamInput:input:visible").each(function() {
       alert($(this).val());
    });
});

工作Fiddle：https://jsfiddle.net/qffL6dsp/1/

更换

   $('.NewTeam').eq(i).find('input').each(function () {

只需

  $('.NewTeam').eq(i).find(':input').each(function () {

input只选择输入标签，:input也选择其他形式的输入元素。

首先，您需要将事件作为参数传递给您的点击函数，然后您需要修改的选择器。每个也要查找select元素作为"input"的元素只会查找输入元素，而不会选择元素：

$("#SubmitButton").click(function(event){
   var Teams = $(".NewTeam").length;   //working
   event.preventDefault(); 
   alert("clicked lets do ajax");
   for (var i=0; i < Teams; i++){
      $('.NewTeam').eq(i).find('input, select').each(function () {
          alert(this.value); // "this" is the current element in the loop
          console.info($(this).text() ); this will print in console in blue color the text of <option> as you have not assigned value attribute
      });
   }
});
相关文章：