如何使用多個選擇選項

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>