как изменить значение при изменении выберите тег - PullRequest
Новая
       1

как изменить значение при изменении выберите тег

1 голос
/ 04 ноября 2019

Как я могу изменить значения во втором select при изменении первого?

Когда я изменяю на Cool drink, тогда отображаются только Pepsi, Coac & Sprite. Когда я изменяю на Food, тогда показываю Pizza, Chicken & Bar b Q

<select id="food">
  <option>Cool Drink</option>
  <option>Food</option>
</select>
<select id="Person">
  <option>Pepsi</option>
  <option>Coac</option>
  <option>Sprite</option>
  <option>Bar b Q</option>
  <option>Chicken</option>
  <option>Pizza</option>
</select>

Ответы [ 5 ]

0 голосов
/ 04 ноября 2019

Так просто, как я мог это сделать. Очень странно, что мы не можем использовать: видно по опциям 

$('#food').on("change",() => {
  const $opts = $('#Person option');
  $opts.each((_,el) => $(el).toggleClass("hidden"));
  $('#Person').val($opts.not('.hidden').eq(0).val());
})
.hidden {
  display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="food">
  <option>Cool Drink</option>
  <option>Food</option>
</select>
<select id="Person">
  <option value="1">Pepsi</option>
  <option value="2">Coca Cola</option>
  <option value="3">Sprite</option>
  <option value="4" class="hidden">Bar b Q</option>
  <option value="5" class="hidden">Chicken</option>
  <option value="6" class="hidden">Pizza</option>
</select>
0 голосов
/ 04 ноября 2019

Изменение содержимого второго раскрывающегося списка в зависимости от атрибута типа данных первого выбора в событии onChange. Смотри ниже. 

$('#food').on('change', function(){
	
  const drink = ["Pepsi", "Coac", "Sprite"];
  const food = ["Bar b Q", "Chicken", "Pizza"]

  let type = $(this).children(":selected").data('type')
  
  var $dropdown = $("#Person");
  
  if (type=='food') {
  	arr = food
  }  else if (type=='drink') {
  	arr = drink
  } 

	$dropdown.find('option').remove();
  for (i = 0; i < arr.length; i++) {
    $dropdown.append($("<option />").text(arr[i]));
  }


})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
    <title>Food Order</title>
</head>
<body>
    <select id="food" >
        <option>Please Select</option>
        <option data-type="drink">Cool Drink</option>
        <option data-type="food">Food</option>
    </select>
    <select id="Person" >
      <option>Please Select Type</option>
    </select>
</body>
</html>
0 голосов
/ 04 ноября 2019

Это может быть с помощью ajax. 

<html>
<head>
    <title>Food Order</title>
</head>
<body>
    <select id="food" >
        <option value="1">Cool Drink</option>
        <option value="2">Food</option>
    </select>
    <select id="Person" >
        <option>Select Option</option>
    </select>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#food").change(function(){
            var txt=$("#food").val();
            $("#Person").empty();
            $.ajax({
                url : 'load.php',
                method : 'POST',
                data : {txt:txt},
                success:function(data){
                    $("#Person").html(data);
                }
            });
        });
    });
</script>
</html>

Добавьте еще одну страницу с именем (load.php) и добавьте этот код 

<?php $data=$_POST['txt'];  ?>
<?php if ($data == 1): ?>
        <option>Pepsi</option>
        <option>Coac</option>
        <option>Sprite</option>
<?php else: ?>
        <option>Bar b Q</option>
        <option>Chicken</option>
        <option>Pizza</option>
<?php endif ?>
0 голосов
/ 04 ноября 2019

Вы можете использовать следующий код. Это ваше, но с некоторыми вещами:

$(()=>{
  $('#food').change(function(){
      $('#Person').find('option').each(function(){
          $(this).toggle(); 
      });
      
      $('#Person').find('option').eq(0).css('display') == 'none' ? 
        $('#Person').val(2) :
        $('#Person').val(1);
  
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="food" >
        <option>Cool Drink</option>
        <option>Food</option>
    </select>
    <select id="Person" >
        <option value="1">Pepsi</option>
        <option>Coac</option>
        <option>Sprite</option>
        <option value="2" style="display:none;">Bar b Q</option>
        <option style="display:none;">Chicken</option>
        <option style="display:none;">Pizza</option>
    </select>
0 голосов
/ 04 ноября 2019

Создайте список напитков и продуктов питания в JS. 

const drinks = ["Pepsi", "Cola"];
const food = ["Pizza 1", "Pizza 2"]

, а затем создайте функцию JS, которая будет вызываться событием onChange и обновлять второй выпадающий список. 

function changeList(name){
    if (name === "Food") { 
         // fill list with foods
    }
    // fill list with drinks
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...