时间戳

首页 > 解决方案 > 通过单击激活输入字段并在离开后清除选择字段

javascript - 通过单击激活输入字段并在离开后清除选择字段

问题描述

我有 3 个链接，它们用不同的选项填充选择字段。如果 textlabel 处于活动状态并且有人单击链接 selectlist1 或其他链接，它会激活 selectlabel 并清除 inputfield。但是如果从 selectlabel 切换到 textinput，它不会在离开后清除 selectlabel，所以我的公式发送 bove 输入并选择。离开后选择标签必须清晰。也许有人可以在没有 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>

标签： javascriptjqueryhtml

解决方案

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

相反，您要做的是设置selectin.disabled = trueifradio1.checked == true和selectin.disabled = falseelse，因为未提交禁用的字段。

旧答案：

试试这个代码。

这就是我正在做的事情：

  • INPUT selected：创建并选择一个空选项。
  • SELECT selected：删除该选项。

代码：

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]);
        }
    }
}

推荐阅读