如何使用多个选择选项

Question

追加投入在不同事业部的Jquery比方说，我有HTML代码：

<div class='row'> 
    <div class='col-md-12'> 
     <div class='section1'> 
      <select name='language[]' class='language' id='language'> 
       <option>English</option> 
       <option>Mandarin</option> 
       <option>Others</option> 
      </select> 
     </div> 
     <div class='section2'> 
      <select name='status[]' class='status'> 
       <option>Active</option> 
       <option>Pasive</option> 
      </select> 
     </div> 
     <div class='section3 append_here'></div> 
    </div> 
    <div class='col-md-12'> 
     <div class='section1'> 
      <select name='language[]' class='language' id='language'> 
       <option>English</option> 
       <option>Mandarin</option> 
       <option>Others</option> 
      </select> 
     </div> 
     <div class='section2'> 
      <select name='status[]' class='status'> 
       <option>Active</option> 
       <option>Pasive</option> 
      </select> 
     </div> 
     <div class='section3 append_here'></div> 
    </div> 
</div> 

我的代码的目的是，当语言为English，它会显示的另一个领域得分。当语言为Others，它会显示（追加）输入另一场

我想这样对我的jQuery的语言：

$("body").on("change", "#language", function(){ 
    var value = $(this).val(); 
    if(value == 'English'){ 
     var input = `<input type='text' placeholder='input your score here !'>`; 
     $(this).next('.append_here').show().html(input); 
    }else if(value == 'Others'){ 
     var input = `<input type='text' placeholder='input your language here !'>`; 
     $(this).next('.append_here').show().html(input); 
    }else{ 
     $(this).next('.append_here').hide().empty(); 
    } 
}); 

我没有问题，当我只使用一个单一的select language option ，问题是，如果select language option多于一个，则html()功能工作的所有领域..​​..

任何帮助将是非常赞赏

感谢顺便说一句

Answer 1

在这里，您去工作的例子： 你不应该使用相同ID的使用，而不是类，然后得到指数当前元素。

$("body").on("change", ".language", function(){ 
 
    var index = $(this).index(".language"); 
 
    var value = $('.language:eq('+index+')').val(); 
 

 
    if(value == 'English'){ 
 
     var input = `<input type='text' placeholder='input your score here !'>`; 
 
     $('.append_here:eq('+index+')').show().html(input); 
 
    }else if(value == 'Others'){ 
 
     var input = `<input type='text' placeholder='input your language here !'>`; 
 
     $('.append_here:eq('+index+')').show().html(input); 
 
    }else{ 
 
     $('.append_here:eq('+index+')').hide().empty(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='row'> 
 
    <div class='col-md-12'> 
 
    <div class='section1'> 
 
     <select name='language[]' class='language' id='language1'> 
 
     <option>Choose language</option> 
 
     <option>English</option> 
 
     <option>Mandarin</option> 
 
     <option>Others</option> 
 
     </select> 
 
    </div> 
 
    <div class='section2'> 
 
     <select name='status[]' class='status'> 
 
     <option>Active</option> 
 
     <option>Pasive</option> 
 
     </select> 
 
    </div> 
 
    <div class='section3 append_here'></div> 
 
    </div> 
 
    <div class='col-md-12'> 
 
    <div class='section1'> 
 
     <select name='language[]' class='language' id='language2'> 
 
     <option>Choose language</option> 
 
     <option>English</option> 
 
     <option>Mandarin</option> 
 
     <option>Others</option> 
 
     </select> 
 
    </div> 
 
    <div class='section2'> 
 
     <select name='status[]' class='status'> 
 
     <option>Active</option> 
 
     <option>Pasive</option> 
 
     </select> 
 
    </div> 
 
    <div class='section3 append_here'></div> 
 
    </div> 
 
</div>

Answer 2

你的代码中有一些选择器问题。检查下面更新片断..

$("body").on("change", "#language", function(){ 
 
    var value = $(this).val(); 
 
    
 
    if(value == 'English'){ 
 
     var input = "<input type='text' placeholder='input your score here !'>"; 
 
     $('.append_here').show().html(input); 
 
    }else if(value == 'Others'){ 
 
     var input = "<input type='text' placeholder='input your language here !'>"; 
 
     $('.append_here').show().html(input); 
 
    }else{ 
 
     $('.append_here').hide().empty(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='col-md-12'> 
 
    <div class='section1'> 
 
     <select name='language[]' class='language' id='language'> 
 
      <option>English</option> 
 
      <option>Mandarin</option> 
 
      <option>Others</option> 
 
     </select> 
 
    </div> 
 
    <div class='section2'> 
 
     <select name='status[]' class='status'> 
 
      <option>Active</option> 
 
      <option>Pasive</option> 
 
     </select> 
 
    </div> 
 
    <div class='section3 append_here'></div> 
 
</div>