Javascript 使用下拉菜单选项创建文本字段

Javascript to create text field with dropdown menu options

本文关键字：创建 文本 字段 选项 下拉菜单 Javascript      更新时间：2023-09-26

一旦从下拉框中选择了某个值，我一直在使用一些 Javascript 来创建文本字段，但是现在我对 Javascript 的知识有限，我需要编辑它，以便新的下拉选项也创建一个文本字段。当我尝试编辑它似乎不起作用时。这是我尝试使用的js：

$(".claim").change(function() {
    $(".area").find(".field").remove();
    //or
    $('.area').remove('.field');
    if ($(this).val() == "Insurance") {
        $(".area").append("<input class='field' name='cost' type='text' placeholder='Cost' />");
    }
    if ($(this).val() == "Damage &lt;$100") {
        $(".area").append("<input class='field' name='cost' type='text' placeholder='Cost' />");
    }
});

这是 HTML 下拉框：

<div id="area" class="area">
    <strong>Cases:</strong><input name="cases" type=text  placeholder="Cases ID" maxlength="7" style="width:129px;">
    <br />
    <strong>Claim:</strong>
    <select class="claim" id="claim" name="claim"> 
    <option value="">Select a Claim</option>
    <option value="Insurance">Insurance</option>  
    <option value="Warrenty">Warrenty</option>
    <option value="Damage &lt;$100">Damage &lt;$100</option>
    </select>

我尝试编辑Javascript和其他一些东西，但似乎都没有工作。我猜它很简单，但我不确定目前是否使用 Javascript，所以任何帮助都会很棒。

使用

$(this).val() == "Damage <$100"

而不是

$(this).val() == "Damage &lt;$100"

演示

注意

您正在比较字符串，因此不需要任何特殊字符。

更多

而不是$(this).val()使用this.value，会更快。

相关文章：