Question

我的代码有一个父选择标签，带有2个选项apple和butter每个选项的值为1和2，当我选择苹果时它会显示另一个选择标签，反之亦然，我的问题是它会显示另一个选择和另一个，我需要隐藏另一个选择并显示另一个选择，你能帮帮我吗？

以下是代码：

＆＃13;

$(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));
      });

    }

  });
});

＆＃13;

<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>

＆＃13;

Answer 1

更改第一个drowpdown值时删除#selectBox内容

＆＃13;

$(document).ready(function () {

  
       function createDropdown(arrayList){
         
           var $select = $('<select>');
			$(arrayList).each(function () {
			$select.append($('<option>').attr('value', this.val).text(this.text));		
			});
         return $select;
         }
  
		$('#defList').on('change', function(){
          $("#selectBox").empty();
			var tarSelect = $(this).val();
			console.log(tarSelect);
			if(tarSelect == 1) {		
			var arrayList = 
			[
			{val: 1,text: 'one'},
			{val: 2,text: 'two'},
			{val: 3,text: 'three'}
			];
          createDropdown(arrayList).appendTo('#selectBox');
		
		} else if (tarSelect == 2) {
			var arrayList2 = 
			[
			{val: 1,text: 'one'},
			{val: 2,text: 'two'},
			{val: 3,text: 'three'}
			];
			
			createDropdown(arrayList2).appendTo('#selectBox');		
			
		}
		
		});	
  $('#defList').trigger("change");
});

＆＃13;

<!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>
		
		<select id="defList">
			<option value="1">Apples</option>
			<option value="2">Butter</option>
		</select>
	

		<div id="selectBox">
	
		
		</div>
	
		
	  
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	  <script src="js/scripts.js"></script>
   </BODY>
</HTML>

＆＃13;

Answer 2

您最初可以使用$('#selectBox').html("");

清除新的选择区域

但也将var selectList2 = $('<select>').appendTo('#selectBox').remove();更改为var selectList2 = $('<select>').appendTo('#selectBox');

＆＃13;

$(document).ready(function() {

	 $('#defList').on('change', function() {
         $('#selectBox').html("");
		 var tarSelect = $(this).val();
		 console.log(tarSelect);
		 if (tarSelect == 1) {
			 var arrayList = [{
					 val: 1,
					 text: 'A one'
				 },
				 {
					 val: 2,
					 text: 'A two'
				 },
				 {
					 val: 3,
					 text: 'A 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: 'B one'
				 },
				 {
					 val: 2,
					 text: 'B two'
				 },
				 {
					 val: 3,
					 text: 'B three'
				 }
			 ];


			 var selectList2 = $('<select>').appendTo('#selectBox');
			 $(arrayList2).each(function() {
				 selectList2.append($('<option>').attr('value', this.val).text(this.text));
			 });

		 }

	 });
 });

＆＃13;

<!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>

	<select id="defList">
		<option value="1">Apples</option>
		<option value="2">Butter</option>
	</select>

	<div id="selectBox">

	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="js/scripts.js"></script>
</BODY>

</HTML>

＆＃13;

如何使用select标签隐藏/显示所选标签？

2 个答案: