Question

我有3个链接，它们用不同的选项填充选择字段。如果textlabel处于活动状态，并且有人单击链接selectlist1或其他链接，则会激活selectlabel并清除输入字段。但是，如果从selectlabel切换到textinput，则离开后不会清除selectlabel，所以我的配方设计师会发送bove输入并进行选择。离开后，selectlabel必须清除。也许有人可以在没有jQuery的情况下用纯js编写所有代码。谢谢

<!doctype html>
<html>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<body>
  <script>
    var selectData = {

      "sel1": {

        "100": "select100", // selectdaten
        "101": "select101",
        "102": "select102",
        "103": "select103",
        "104": "select104"

      },
      "sel2": {

        "201": "select201",
        "202": "select202",
        "203": "select203",
        "204": "select204",
        "205": "select205"

      },
      "sel3": {

        "301": "select301",
        "302": "select302",
        "303": "select303",
        "304": "select304",
        "305": "select305"


      }
    };
    jQuery(document).ready(function($) {
      $(document).on('click', '.selectin', function(event) {

        var radio2 = document.getElementById('radio2');
        if (radio2.checked == false) {
          radio2.checked = true;
          toggleRadio();
        }

        event.preventDefault();
        var b = $(this),
          buttonId = b.attr('id'),
          selectSet = selectData[buttonId],
          selectField = $('#selectin');
        selectField.empty();
        if (selectSet) {
          $.each(selectSet, function(k, v) {
            selectField.append($('<option>', {
              value: k,
              text: v
            }));
          });
        }
        return false;
      });
    });
  </script>

  <li><a href="#" id="sel1" class="selectin">Selectlist1</a></li>
  <li><a href="#" id="sel2" class="selectin">Selectlist2</a></li>
  <li><a href="#" id="sel3" class="selectin">Selectlist3</a></li>
<form method="post" name="multiform" id="form8" action="" onchange="toggleRadio();">
    <label for="radio1">INPUT Text</label>
    <input id="radio1" type="radio" name="select" checked />
    <label for="radio2">SELECT from</label>
    <input id="radio2" name="select" type="radio" />
    <label id="textLabel" for="textin">Formular
                <input id="textin" type="text" placeholder="test1" />
            </label>
    <label id="selectLabel" for="selectin">Items
                <select id="selectin">
                  <option selected>Please choose from selectlist first</option>
                  
                </select>
            </label>
  </form> 
  <script>
    function toggleRadio() { // will activate when the form will change.
      var radio1 = document.getElementById('radio1'); // radio 1
      var radio2 = document.getElementById('radio2'); // radio 2
      if (radio1.checked == true) { // if the first checked display input and hide select
        document.getElementById('textLabel').style.display = 'block';
        document.getElementById('selectLabel').style.display = 'none';
        document.getElementById('selectin').selectedIndex = 0; // clear selected option
      } else { // because you got only 2 option you don't have to use another condition
        document.getElementById('textLabel').style.display = 'none';
        document.getElementById('selectLabel').style.display = 'block';
        document.getElementById('textin').value = ''; // clear input
      }
    }
    toggleRadio(); // call the function
  </script>
</body>

</html>

Answer 1

编辑：如果我选择了INPUT，虽然我的原始代码会“清除”选择字段（将其值设置为""），但它仍可能会发送带有表单的内容。 / p>

相反，您要设置的是selectin.disabled = true，如果radio1.checked == true，则设置selectin.disabled = false，否则，因为未提交禁用字段。

旧答案：

尝试此代码。

这就是我在做什么：

选择输入：创建并选择一个空选项。
已选择SELECT：删除该选项。

代码：

function toggleRadio() {
    var radio1 = document.getElementById('radio1');
    var radio2 = document.getElementById('radio2');
    var selectin = document.getElementById('selectin');
    if (radio1.checked == true) {
        document.getElementById('textLabel').style.display = 'block';
        document.getElementById('selectLabel').style.display = 'none';
        if (selectin.options[0].value !== '') {
            let opt = document.createElement('option');
            opt.value = '';
            opt.innerHTML = 'Nothing selected';
            selectin.insertBefore(opt, selectin.firstChild);
        }
        selectin.selectedIndex = 0;
    } else {
        document.getElementById('textLabel').style.display = 'none';
        document.getElementById('selectLabel').style.display = 'block';
        document.getElementById('textin').value = '';
        if (selectin.options[0].value === '') {
            selectin.removeChild(selectin.getElementsByTagName('option')[0]);
        }
    }
}

单击以激活输入字段，并在离开后清除选择字段

1 个答案: