Question

我是html javascript的新手，正在尝试学习它。我遇到一个问题，当我选择一个下拉列表的值时，如果某些条件匹配，它将选择另一个下拉列表的值。如果他们从service_type下拉列表中选择选项4（提取），则计数器下拉列表将自动选择选项2车道。否则，用户可以在两个下拉菜单中自由选择任何值。仅当他们选择“外卖”时，它才会使车道处于选中状态，并使表服务选项处于非活动状态。如果他们从服务类型下拉菜单中选择1,2或3，则将启用选项1。我需要一个javascript，没有jquery。请帮助我

    <div class="form-group col-md-12">
        <select name="service_type" id="service_type" class="form-control form-control-line" required>
            <option value="" selected="selected" >Select Service</option>
            <option value="1">Dining</option>
            <option value="2">Beverages</option>
            <option value="3">Liquor</option>
            <option value="4">Takeout</option>
        </select>
    </div>


    <div class="form-group col-md-12">
        <select name="counter" id="counter" class="form-control form-control-line" required>
            <option value="" selected="selected" >Select Counter</option>
            <option value="1">Table Service</option>
            <option value="2">Driveway</option>
        </select>
    </div>

Answer 1

您可以像这样使用javascript：

nanosleep

function Checker(el){

  const select = document.getElementById('counter');
  removeOptions(select);
  if(el.value == '4'){
    var option1 = document.createElement("option");
        option1.text = "Driveway";
        option1.value = "2";
        select.add(option1);
  }else{
    var option2 = document.createElement("option");
        option2.text = "Table Service";
        option2.value = "1";
        select.add(option2);
    var option1 = document.createElement("option");
        option1.text = "Driveway";
        option1.value = "2";
        select.add(option1);  

  }
}


function removeOptions(selectElement) {
                var i, L = selectElement.options.length - 1;
                for (i = L; i >= 0; i--) {
                    selectElement.remove(i);
                }
}

创建两个函数，一个用于在每次调用该函数时首先创建选项库，第二个用于删除选项。

Answer 2

const firstSelect = document.querySelector('#serviceType');
const secondSelect = document.querySelector('#counter');

firstSelect.addEventListener('change', (event) => {
  if (event.target.value === '4') {
    secondSelect.value = '2';
    secondSelect.disabled = true;
  } else if (typeof event.target.value === 'string' && event.target.value.length > 0) {
    secondSelect.disabled = false;
    secondSelect.value = '1';
  } else {
    secondSelect.disabled = false;
    secondSelect.value = '';
  }
});

    <div class="form-group col-md-12">
        <select name="service_type" id="serviceType" class="form-control form-control-line" required>
            <option value="" selected="selected" >Select Service</option>
            <option value="1">Dining</option>
            <option value="2">Beverages</option>
            <option value="3">Liquor</option>
            <option value="4">Takeout</option>
        </select>
    </div>


    <div class="form-group col-md-12">
        <select name="counter" id="counter" class="form-control form-control-line" required>
            <option value="" selected="selected" >Select Counter</option>
            <option value="1">Table Service</option>
            <option value="2">Driveway</option>
        </select>
    </div>

它如何工作？

您需要从DOM中选择“选择”控件，然后在第一次选择时监听change事件，然后才能从中获取价值，并取决于选择＃2的选择更改值。为了禁用第二个下拉菜单中选择其他选项的功能，您可以将其禁用。

根据先前的下拉选择选择另一个下拉值

2 个答案: