Question

我正在用jQuery编写脚本，并且在更新两个组合框时遇到了问题。基本上，我有三个组合框。一旦改变，我希望其他两个用数据更新。我可以得到一个盒子来填补。但不是第二个...附件就是我现在拥有的。

$(document).ready(function() {
  var $schoolname = $("#schoolname"),
      $programList1 = $("#programs"),
	  $AvailableDates = $("#AvailableDates"),

      programs = {
        'option1' :
            '<option value="">Box 1</option>',
        'option2' :
            '<option value="">Box 2</option>',
        'option3' :
			'<option value="">Box 3</option>'
      },
	  
	   AvailableDates = {
        'option1' :
			'<option value="">DATE1</option>',

        'option2' :
			'<option value="">DATE2</option>',

        'option3' :
			'<option value="">DATE3</option>'
      };

 
  $schoolname.change(function() {
    var $selected = $(this).find('option:selected');
	
    $programList1.html(
      '<option>Please Select</option>' +
      programs[$selected.val()]
    )('refresh');
	
  });
 
  $programList1.html(
    '<option>Please Select</option>' +
    programs['option1'] +
    programs['option2'] + 
	programs['option3']
  )('refresh');
  
//dates

  $schoolname.change(function() {
  	$AvailableDates.html(
      '<option>Please Select</option>' +
      AvailableDates[$selected.val()]
    )('refresh');
  });
	
  $AvailableDates.html(
    '<option>Please Select</option>'
  )('refresh');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<form> 
<label for="school">School</label>
<select name="school" id="schoolname" title="school">
  <option>School</option>
  <option value="option1">option1</option>
  <option value="option2">option2</option>
  <option value="option3">option3</option>
</select>

<label for="Program">Program</label>
<select name="Program" id="programs" title="Program"></select>

<label for="AvailableDates">Available Dates</label>
<select name="AvailableDates" id="AvailableDates" title="AvailableDates"></select>
</form>

Answer 1

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</head>

<body>
    <form> 
        <label for="school">School</label>
        <select name="school" id="schoolname" title="school">
            <option>School</option>
            <option value="option1">option1</option>
            <option value="option2">option2</option>
            <option value="option3">option3</option>
        </select>

        <label for="Program">Program</label>
        <select name="Program" id="programs" title="Program"></select>

        <label for="AvailableDates">Available Dates</label>
        <select name="AvailableDates" id="AvailableDates" title="AvailableDates"></select>
    </form>
</body>


</html>

<script>
    $(document).ready(function() {
        var $schoolname = $("#schoolname");
        var $programList1 = $("#programs");
        var $AvailableDates = $("#AvailableDates");

        var programs = {
            'option1': '<option value="">Box 1</option>',
            'option2': '<option value="">Box 2</option>',
            'option3': '<option value="">Box 3</option>'
        };

        var AvailableDates = {
            'option1': '<option value="">DATE1</option>',
            'option2': '<option value="">DATE2</option>',
            'option3': '<option value="">DATE3</option>'
        };

        $schoolname.change(function() {
            var $selected = $(this).find('option:selected');
            $programList1.html('<option>Please Select</option>' + programs[$selected.val()]);
            $AvailableDates.html('<option>Please Select</option>' + AvailableDates[$selected.val()]);
        });

        $programList1.empty();
        $programList1.append('<option>Please Select</option>');
        for(program in programs)
            $programList1.append(programs[program]);


        $AvailableDates.html('<option>Please Select</option>');
});
</script>

改变多个Combobox jQuery

1 个答案: