Javascript JS：在提示下选择时更改选择选项值？

我环顾四周，没有人问过这个问题

我有一个选择框，如下所示：

<select onchange="change()">
  <option value="" selected>Option 1</option>
  <option value="30">Option 2</option>
  <option value="90">Option 3</option>
</select>

选择1
选择2
选择3

我想添加另一个选项

  <option value="custom">Option 4</option>

选项4

…当选择（单击）时，将弹出一个警报框，要求用户键入一个数字（如果30或90是不可行的选项，如选项的值），以替换选项的值

<script>
function change() {
  if(value == "custom") {
    value = prompt("Please enter a new number:", "60");
  }
}
</script>

函数更改（）{
如果（值=“自定义”）{
值=提示（“请输入新数字：”，“60”）；
}
}

我想知道最好的方法是使用普通的javascript——如果有必要，我会使用jQuery

---

有什么想法吗？举个例子也不错。

您的

onchange

事件是处理此问题的适当方法。这主要是用户界面（UX）设计的问题。要以提示方式执行此操作，应使用

parseFloat

：

change() {
  var value = prompt('You\'ve chosen Other. Please enter a value', '60');
  if(value) {
    value = parseFloat(value);
    // apply it to your model
  } else {
    // apply NULL to your model
  }
}

---

从

UXD

的角度来看，我会使用

typeahead

输入。它将自动搜索已知答案，但也允许用户输入自己的答案。这不是标准的html，所以您需要自己编写或使用jquery。但是从用户界面设计的角度来看，提示很糟糕。

看看这段代码。我想这就是你想要做的：

HTML

<select id="optionvals" onclick="change()">
  <option value="" selected>Option 1</option>
  <option value="30">Option 2</option>
  <option value="90">Option 3</option>
  <option value="custom">Option 4</option>
</select>

仅当选项中的选定值为“自定义”时，才会提示您进行更改。然后，在您选择一个自定义值后，它会将

自定义

选项元素的值重写为您刚才在提示中输入的值。分配新值后，我将其记录下来，以显示它正在工作

---

这是一把小提琴：

这太完美了！非常感谢你！我一辈子都搞不懂JS，我非常喜欢编写PHP而不是JS的格式。脚本能否找到基于ID而不是值的选项，以便在需要时可以多次更改？是的。将oItem.options[oItem.selectedIndex].value中的“value”更改为“id”。我似乎无法解决这个问题，您是否可以更改小提琴？这是我使用的最后一个代码：（以防万一有人看到答案感到好奇）谢谢您的回答，我自己也不喜欢提示。。。我永远不会在网站的前端使用它。这只是我用来执行节省大量时间的计算的一个小工具——只针对少数员工，提示是我能想到的最简单的事情。如果我想发疯，我想我可以创建弹出模型并创建自己的输入。我也怀疑这个选项会经常被使用。。。无论哪种方式，建议和思考UI/UX都需要+1。

function change() {
  var oItem = document.getElementById('optionvals');
  var value = oItem.options[oItem.selectedIndex].value;
  if(value == "custom") {
    alert("you've clicked b");
    value = prompt("Please enter a new number:", "60");
    oItem.options[oItem.selectedIndex].value = value;
    console.log(oItem.options[oItem.selectedIndex].value)
  }
}