Question

我有一个关于如何获取var然后显示他的特定div的问题。在例子中，如果我选择C然后选择Juice，则需要出现菜单1。问题是，我不知道如何获得var然后只是让潜水出现。当我选择其他成分时，如A然后茶，菜单1需要隐藏，菜单-2必须出现。

感谢您的帮助。

＆＃13;

var mealsByCategory = {
  A: ["Soup", "Juice", "Tea", "Others"],
  B: ["Soup", "Juice", "Water", "Others"],
  C: ["Soup", "Juice", "Coffee", "Tea", "Others"]
}

function changecat(value) {
  if (value.length == 0) document.getElementById("category").innerHTML = "<option></option>";
  else {
    var catOptions = "";
    for (categoryId in mealsByCategory[value]) {
      catOptions += "<option>" + mealsByCategory[value][categoryId] + "</option>";
    }
    document.getElementById("category").innerHTML = catOptions;
  }
}

var Juice = this.id;
$('menu-1' + id).css({
  "display": "inline-block"
});

＆＃13;

.menu-1 {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select name="meal" id="meal" onChange="changecat(this.value);">
  <option value="" disabled selected>Select</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>
<select name="category" id="category">
  <option value="" disabled selected>Select</option>
</select>
<div class="menu-1">menu 1</div>

＆＃13;

JS Fiddle

Answer 1

您可以像这样使用.find()和:selected：

var selected_value = $('#my-select').find('option:selected');

if (selected_value === 'C') {
    $('#target').removeClass('hidden')
}

参考文献：

https://api.jquery.com/find/

https://api.jquery.com/selected-selector/

注意：这不会通过复制粘贴工作，您必须修改脚本。这只是核心原则：）

Answer 2

这是实现它的一种方式。

请注意，我只添加了一条规则（您在问题中指定的规则），因此此代码的唯一功能（除了使用新选项的第二个true之外）是您选择{{1然后出现select，A隐藏和Tea。

如果您想要其他规则（您可能会这样做），那么您可以像对menu1一样指定它们。

menu2

if (selectEl1.value === 'A' && selectEl2.value === 'Tea')

var mealsByCategory = {
  A: ["Soup", "Juice", "Tea", "Others"],
  B: ["Soup", "Juice", "Water", "Others"],
  C: ["Soup", "Juice", "Coffee", "Tea", "Others"]
}

const menuEl = document.querySelector('.menu');
const selectEl1 = document.querySelector('#meal');
const selectEl2 = document.querySelector('#category')

selectEl1.addEventListener('change', event => {
  const meals = mealsByCategory[selectEl1.value]

  // clear the content of the second select and populate it with new options
  selectEl2.innerHTML = '';
  meals.forEach(item => {
    const option = document.createElement('option');
    selectEl2.appendChild(option);
    option.textContent = item;
  });
});

selectEl2.addEventListener('change', event => {
  if (selectEl1.value === 'A' && selectEl2.value === 'Tea') {
    document.querySelector('.menu1').style.display = 'none';
    document.querySelector('.menu2').style.display = 'block';
  }
});

更新（基于提供的fiddle）

.menu2 {
  display: none;
}

<select name="meal" id="meal">
  <option value="" disabled selected>Select</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>
<select name="category" id="category">
  <option value="" disabled selected>Select</option>
</select>
<div class="menu1">Menu 1</div>
<div class="menu2">Menu 2</div>

const CityByCategory = {
    A: ["NY-District-1", "NY-District-2", "NY-District-3"],
    B: ["LA-District-1", "LA-District-2", "LA-District-3"],
    C: ["SF-District-1", "SF-District-2", "SF-District-3"]
}

const clearContent = () => {
  const allDistricts = document.querySelectorAll('.district');
  allDistricts.forEach(item => {
    item.style.display = 'none';
  });
}

const citySelect = document.querySelector('#city');
const categorySelect = document.querySelector('#category')

citySelect.addEventListener('change', event => {
  clearContent();
  const districts = CityByCategory[citySelect.value];
  document.querySelector('.' + districts[0]).style.display = 'block';

  categorySelect.innerHTML = '';
  districts.forEach(item => {
    const option = document.createElement('option');
    categorySelect.appendChild(option);
    option.textContent = item;
  });
});

categorySelect.addEventListener('change', event => {
  clearContent();
  const selected = categorySelect.value;
  const district = document.querySelector('.' + selected);

  if (district) { district.style.display = 'block'; }
});

Answer 3

我不清楚你问的是什么，但无论如何...... 这是我尝试优化代码的片段，我提出了一些你想要的东西：

var mealsByCategory = {
  A: ["Soup", "Juice", "Tea", "Others"],
  B: ["Soup", "Juice", "Water", "Others"],
  C: ["Soup", "Juice", "Coffee", "Tea", "Others"]
}

// Code on change of 1st select
$('#meal').on('change', function() {

  // Get the selected value of the 1st select
  var value = $(this).val();
  
  // Populate options of 2nd select
  var catOptions = "<option value='' disabled selected>Select</option>";
  for (categoryId in mealsByCategory[value]) {
    catOptions += "<option>" + mealsByCategory[value][categoryId] + "</option>";
  }
  $("#category").html(catOptions);
  
});

// Code on change of 2nd select (proposition, don't get what you really want)
$('#category').on('change', function() {
  var index = $("#category option:selected").index();
  $('.menus').hide();
  $('.menu-' + index).show();
});

.menus {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select name="meal" id="meal">
  <option value="" disabled selected>Select</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>
<select name="category" id="category">
  <option value="" disabled selected>Select</option>
</select>
<div class="menus menu-1">menu 1</div>
<div class="menus menu-2">menu 2</div>
<div class="menus menu-3">menu 3</div>
<div class="menus menu-4">menu 4</div>
<div class="menus menu-5">menu 5</div>

随意评论任何修改或以您想要的方式解释我！

希望它有所帮助。

根据选择值显示元素

3 个答案: