使用下拉菜單選項創建文本字段的 Javascript

Question

一旦從下拉框中選擇了某個值，我一直在使用一些 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，所以任何幫助都會很好。

Answer 1

采用

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

代替

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

演示

筆記

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

多一點

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