2017-02-05 2 views
0

У меня в моем коде есть 1 родительский тег select с 2-мя опциями яблок и сливочным маслом. Каждый параметр имеет значение 1 и 2, когда я выбираю яблоко, на котором будет показан другой тег select и наоборот, и моя проблема заключается в том, что он покажет другой выбор и другой, мне нужно скрыть другой выбор и показать другой выбор, можете ли вы мне помочь?Как скрыть/показать теги select с помощью тега select?

Вот код:

$(document).ready(function() { 
 

 
    $('#defList').on('change', function() { 
 
    var tarSelect = $(this).val(); 
 
    console.log(tarSelect); 
 
    if (tarSelect == 1) { 
 
     var arrayList = [{ 
 
     val: 1, 
 
     text: 'one' 
 
     }, { 
 
     val: 2, 
 
     text: 'two' 
 
     }, { 
 
     val: 3, 
 
     text: 'three' 
 
     }]; 
 

 
     var selectList = $('<select>').appendTo('#selectBox'); 
 
     $(arrayList).each(function() { 
 
     selectList.append($('<option>').attr('value', this.val).text(this.text)); 
 
     }); 
 

 
    } else if (tarSelect == 2) { 
 
     var arrayList2 = [{ 
 
     val: 1, 
 
     text: 'one' 
 
     }, { 
 
     val: 2, 
 
     text: 'two' 
 
     }, { 
 
     val: 3, 
 
     text: 'three' 
 
     }]; 
 

 

 
     var selectList2 = $('<select>').appendTo('#selectBox').remove(); 
 
     $(arrayList2).each(function() { 
 
     selectList2.append($('<option>').attr('value', this.val).text(this.text)); 
 
     }); 
 

 
    } 
 

 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="defList"> 
 
    <option value="1">Apples</option> 
 
    <option value="2">Butter</option> 
 
</select> 
 

 
<div id="selectBox"> 
 
</div>

+0

'моя проблема будет показывать другой выбор и другой, мне нужно, чтобы скрыть другой выбирает и показывает другой select', который другой? – Viney

+0

Будет создан новый список выбора, который объявлен в массиве. – Jemai

ответ

1

Удалить содержимое #selectBox при изменении первого значения drowpdown

$(document).ready(function() { 
 

 
    
 
     function createDropdown(arrayList){ 
 
      
 
      var $select = $('<select>'); 
 
\t \t \t $(arrayList).each(function() { 
 
\t \t \t $select.append($('<option>').attr('value', this.val).text(this.text)); \t \t 
 
\t \t \t }); 
 
     return $select; 
 
     } 
 
    
 
\t \t $('#defList').on('change', function(){ 
 
      $("#selectBox").empty(); 
 
\t \t \t var tarSelect = $(this).val(); 
 
\t \t \t console.log(tarSelect); 
 
\t \t \t if(tarSelect == 1) { \t \t 
 
\t \t \t var arrayList = 
 
\t \t \t [ 
 
\t \t \t {val: 1,text: 'one'}, 
 
\t \t \t {val: 2,text: 'two'}, 
 
\t \t \t {val: 3,text: 'three'} 
 
\t \t \t ]; 
 
      createDropdown(arrayList).appendTo('#selectBox'); 
 
\t \t 
 
\t \t } else if (tarSelect == 2) { 
 
\t \t \t var arrayList2 = 
 
\t \t \t [ 
 
\t \t \t {val: 1,text: 'one'}, 
 
\t \t \t {val: 2,text: 'two'}, 
 
\t \t \t {val: 3,text: 'three'} 
 
\t \t \t ]; 
 
\t \t \t 
 
\t \t \t createDropdown(arrayList2).appendTo('#selectBox'); \t \t 
 
\t \t \t 
 
\t \t } 
 
\t \t 
 
\t \t }); \t 
 
    $('#defList').trigger("change"); 
 
});
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 
    "http://www.w3.org/TR/html4/strict.dtd"> 
 
<HTML> 
 
    <HEAD> 
 
     <TITLE>My first HTML document</TITLE> 
 
    </HEAD> 
 
    <BODY> 
 
     <P>Hello world!</p> 
 
\t \t 
 
\t \t <select id="defList"> 
 
\t \t \t <option value="1">Apples</option> 
 
\t \t \t <option value="2">Butter</option> 
 
\t \t </select> 
 
\t 
 

 
\t \t <div id="selectBox"> 
 
\t 
 
\t \t 
 
\t \t </div> 
 
\t 
 
\t \t 
 
\t 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
\t <script src="js/scripts.js"></script> 
 
    </BODY> 
 
</HTML>

+0

Да, это работает, но можно указать тег select по умолчанию? – Jemai

+0

Да, вы должны вызвать событие изменения (я обновил фрагмент) –

+0

Он работал так, что trigger() будет инициирован при загрузке документа? – Jemai

1

Вы можете просто очистить новую выберите область сначала с помощью $('#selectBox').html("");

Но также изменить var selectList2 = $('<select>').appendTo('#selectBox').remove(); к var selectList2 = $('<select>').appendTo('#selectBox');

$(document).ready(function() { 
 

 
\t $('#defList').on('change', function() { 
 
     $('#selectBox').html(""); 
 
\t \t var tarSelect = $(this).val(); 
 
\t \t console.log(tarSelect); 
 
\t \t if (tarSelect == 1) { 
 
\t \t \t var arrayList = [{ 
 
\t \t \t \t \t val: 1, 
 
\t \t \t \t \t text: 'A one' 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t \t val: 2, 
 
\t \t \t \t \t text: 'A two' 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t \t val: 3, 
 
\t \t \t \t \t text: 'A three' 
 
\t \t \t \t } 
 
\t \t \t ]; 
 
       
 
      
 
\t \t \t var selectList = $('<select>').appendTo('#selectBox'); 
 
\t \t \t $(arrayList).each(function() { 
 
\t \t \t \t selectList.append($('<option>').attr('value', this.val).text(this.text)); 
 
\t \t \t }); 
 

 
\t \t } else if (tarSelect == 2) { 
 
\t \t \t var arrayList2 = [{ 
 
\t \t \t \t \t val: 1, 
 
\t \t \t \t \t text: 'B one' 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t \t val: 2, 
 
\t \t \t \t \t text: 'B two' 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t \t val: 3, 
 
\t \t \t \t \t text: 'B three' 
 
\t \t \t \t } 
 
\t \t \t ]; 
 

 

 
\t \t \t var selectList2 = $('<select>').appendTo('#selectBox'); 
 
\t \t \t $(arrayList2).each(function() { 
 
\t \t \t \t selectList2.append($('<option>').attr('value', this.val).text(this.text)); 
 
\t \t \t }); 
 

 
\t \t } 
 

 
\t }); 
 
});
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
 
<HTML> 
 

 
<HEAD> 
 
\t <TITLE>My first HTML document</TITLE> 
 
</HEAD> 
 

 
<BODY> 
 
\t <P>Hello world!</p> 
 

 
\t <select id="defList"> 
 
\t \t <option value="1">Apples</option> 
 
\t \t <option value="2">Butter</option> 
 
\t </select> 
 

 
\t <div id="selectBox"> 
 

 
\t </div> 
 

 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
\t <script src="js/scripts.js"></script> 
 
</BODY> 
 

 
</HTML>

+0

Возможно ли, что при выборе яблок будет показан тег select? – Jemai

Смежные вопросы