Question

我一直在尝试在我的网页上实现动态下拉列表。这个想法是，当用户更改一个下拉列表时，下一个下拉列表将根据第一个下拉列表进行填充。

我一直在使用这里的教程：https://css-tricks.com/dynamic-dropdowns/但指南使用的是外部text / json文件。任何人都可以帮助我理解如何修改text / json的代码，这样我就不需要使用外部文件了（即我可以在html文件中使用我的选项）

对于文本，代码目前看起来像：

＆＃13;

$("#first-choice").change(function() {
   $("#second-choice").load("textdata/" + $(this).val() + ".txt");
});

＆＃13;

对于json，代码如下：

＆＃13;

$("#first-choice").change(function() {

	var $dropdown = $(this);

	$.getJSON("jsondata/data.json", function(data) {
	
		var key = $dropdown.val();
		var vals = [];
							
		switch(key) {
			case 'beverages':
				vals = data.beverages.split(",");
				break;
			case 'snacks':
				vals = data.snacks.split(",");
				break;
			case 'base':
				vals = ['Please choose from above'];
		}
		
		var $secondChoice = $("#second-choice");
		$secondChoice.empty();
		$.each(vals, function(index, value) {
			$secondChoice.append("<option>" + value + "</option>");
		});

	});
});

＆＃13;

由于

Answer 1

一个简单的解决方案是拥有多个隐藏的下拉列表，然后根据第一个值显示：

$('.first').change(function(){
  $('.option').removeClass('show');
  var val = $(this).val();
  switch(val){
    case 'Option 1':
      $('.option.one').addClass('show');
      break;
    case 'Option 2':
      $('.option.two').addClass('show');
      break;
    case 'Option 3':
      $('.option.three').addClass('show');
      break;
  }
})

.option{
  display:none;
}
.show{
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="first">
   <option>Option 1</option>
   <option>Option 2</option>
   <option>Option 3</option>
</select>

<select class="option one show">
   <option>a</option>
   <option>b</option>
   <option>c</option>
</select>
<select class="option two">
   <option>d</option>
   <option>e</option>
   <option>f</option>
</select>
<select class="option three">
   <option>g</option>
   <option>h</option>
   <option>i</option>
</select>

或者在你的jquery中手动设置数组

$("#first-choice").change(function() {

    var $dropdown = $(this);

	var key = $dropdown.val();
                var vals = []
	var beverages = ["tea" , "coffee" , "juice"];
                var snacks = ["burger" , "sandwich" , toast"];

						
	switch(key) {
		case 'beverages':
			vals = beverages;
			break;
		case 'snacks':
			vals = snacks;
			break;
		case 'base':
			vals = ['Please choose from above'];
	}
	
	var $secondChoice = $("#second-choice");
	$secondChoice.empty();
	$.each(vals, function(index, value) {
		$secondChoice.append("<option>" + value + "</option>");
	});

});

没有外部文件的动态下拉列表

1 个答案: