如何更改选择列表js中的选项答案

【问题标题】：How to change an option in a select list js如何更改选择列表js中的选项
【发布时间】：2020-03-23 09:20:36
【问题描述】：

我有一个选择列表的更改事件，我必须在用户选择一个选项后通过提示窗口询问用户，他要选择的另一个选项是什么，然后在提示窗口中引入值，所选选项随新选项而变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Examen modulo1</title>
    <script>

        function cambiaSelect() {
            var provincias = document.getElementById("provincias");
            var posicion = provincias.selectedIndex;
            var select = provincias.options[posicion].value;
            var pantalla;

            // when prompt value is 0
            if (provincias.options[posicion].value == 0) {
                alert("No has seleccionado ninguna provincia");
            } else {
                // when index is selected
                if (provincias.options[posicion].selected == true) {
                    pantalla = prompt("Has seleccionado la provincia: " + provincias.options[posicion].text + "\n Introduce otra provincia aqui:");
                }
                // when prompt do not receive a value
                if (pantalla == "") {
                    alert("El valor que has introducido no existe!\Intentalo de nuevo!");
                }
                //prompt equals the selected value
                if (select == pantalla && provincias.options[posicion].selected == true) {
                    alert("Esa provincia ya esta seleccionada");
                }
            }
        }//cambia
    </script>
</head>

<body>
4.Formulario de tipo select. Selecciona provincias:<br>

<form method="GET">

    <br>
    <select id="provincias">
        <option value="0">0.Selecciona...</option>
        <option value="1">1.Albacete</option>
        <option value="2">2.Murcia</option>
        <option value="3">3.Madrid</option>
    </select><br>
    <br>
    <input type="button" value="Cambiar" onclick="cambiaSelect()"><br>
    <br>
    <br>

</form>
</body>
</html>

【问题讨论】：

到底是什么问题？
我的观点是：当用户在提示中引入所需选项的新值时，获取该值并在列表中自动选择它。

标签： javascript events select button

【解决方案1】：

您可以通过单击“运行代码 sn-p”来运行下面的代码。如果用户输入 3，选择的选项将变为“3.Madrid”。西班牙语让我很困惑，所以我把它换成了英语，但编程逻辑是一样的。

<form method="GET">
  <br>
  <select id="provincias">
    <option value="0">0.Selecciona...</option>
    <option value="1">1.Albacete</option>
    <option value="2">2.Murcia</option>
    <option value="3">3.Madrid</option>
  </select>
  <br>
  <input type="button" value="Cambiar" onclick="cambiaSelect()">

</form>

<script>
  function cambiaSelect() {
    var provinces = document.getElementById("provincias");
    var position = provinces.selectedIndex;
    var select = provinces.options[position].value;
    var pantalla;

    if (provinces.options[position].value == 0) {
      alert("You have not selected any province");
    } else {
      if (provinces.options[position].selected == true) {
        pantalla = prompt("You have selected the province: " + provinces.options[position].text + "\n Choose another province here");
        while (true) {
          if (pantalla) { // this ensures that if the user clicks cancel on the prompt, we don't do any more logic
            if (pantalla === "") {
              alert("The value you entered does not exist. Try again!");
            } else if (select === pantalla) {
              alert("That province is already selected");
            } else if (pantalla >= 1 && pantalla <= 3) {
              document.getElementById('provincias').selectedIndex = pantalla;
              break;
            }
            pantalla = prompt("Choose another province here");
          } else { // if the cancel button on prompt was pressed, get out of loop
            break;
          }
        }
      }
    }
  }
</script>

唯一的问题是如果用户输入了一个介于 1 和 3 之间的非整数数字，比如 2.5。 2.5 不是一个合适的索引，对吧？所以如果你想处理这种情况，你可以添加这个修改：

else if (Number.isInteger(Number(pantalla)) && pantalla >= 1 && pantalla <= 3)。如果您还有其他问题，请告诉我。

【讨论】：