JavaScript：是不是可以动态地将 <input> 更改为 <select> 元素并再次返回？

Posted 2023-03-05

【中文标题】JavaScript：是不是可以动态地将 <input> 更改为 <select> 元素并再次返回？

【英文标题】：JavaScript: is it possible to dynamically change an <input> to a <select> element and back again?JavaScript：是否可以动态地将 <input> 更改为 <select> 元素并再次返回？

【发布时间】：2012-06-23 05:43:43

【问题描述】：

我正在使用“Zen Cart”购物车。默认设置是让访问者选择国家和动态填充“州”。如果他们选择了一个没有定义州的国家，下拉菜单会显示“在下面输入您的州”，并且会动态显示一个输入框。

如果为该国家/地区定义了州，则当前的方式很好，但如果没有，那么将下拉菜单显示为文本输入而不是显示新的文本输入会更好。

如果没有选择，我可以动态地将下拉菜单更改为文本输入吗？而且，如果没有启用 javascript，它可以默认为文本输入吗？

我看到这个问题：Change select to input on selection of country?

但我没有得到 jQuery 参考。 :(

【问题讨论】：

jQuery 基本上是一个javascript库jquery.com

所以真正的问题是，“什么是 jQuery”。我回答google.com?q=jquery。

不，如果那是真正的问题，那么这就是问题所在。

我收回了。那应该是我的问题。确实最有启发性！

【参考方案1】：

还有另一种可能的实现方式：

您在 html 中添加 INPUT 和 SELECT 元素。

如果您定义了 STATES，则输入 display: none; 并添加变体以选择到您的 SELECT 中；否则，您选择display: none;，因此用户可以看到输入。

它易于实施和使用，对用户来说很清楚。

【讨论】：

页面加载时没有“display:none”的那个。 JS 很酷，但你也需要考虑 CSS 部分。

【参考方案2】：

将文本输入放入HTML。如果选择了具有州的国家/地区，请将 input 替换为具有州（或地区或省或其他）的 select 元素。如果 JavaScript 未启用或不可用，则用户手动进入状态。

类似：

<select name="country" onchange="updateState(this);">
  <option value="country0">country0
  <option vlaue="country1">country1
  <option>country...
</select>
...
<input type="text" name="state">


<script>
  function updateState(element) 
    if ( /* element.value has states */) 
      // replace ths.form.state with a select
      // of appropriate states
     else 
      // replace this.form.state with a text input
    
  
</script>

else 块是必需的，因为用户可以选择一个有州的国家，然后选择一个没有州的国家。以上有一些变化（例如切换显示而不是替换），选择任何适合的。