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

在从下拉框中选择某个值后，我一直在使用一些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' />");

    }
});

$（“.claim”）.change（函数（）{
$（“.area”）.find（“.field”）.remove（）；
//或
$（'.area'）。删除（'.field'）；
如果（$（this.val（）==“保险”）{
$（“.area”）。追加（“”）；
}
如果（$（this.val（）=“损坏$100”）{
$（“.area”）。追加（“”）；
}
});

下面是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>

案例：


声明：
选择一个索赔
保险
沃伦蒂
损失100美元

我曾尝试编辑Javascript和其他一些东西，但似乎都不起作用。我猜这很简单，但我现在不确定是否使用Javascript，所以任何帮助都会很好。

使用

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

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

更多

---

用

$（this.val（）

代替

使用
this.value
，速度会更快。
我已经尝试使用演示中使用的代码u，我注意到，一旦我将其与jquery代码的其余部分放在一起，插入代码将不会工作，而damge@Matthew的插入代码则不会工作，这意味着上面的代码不工作？有没有可能在fiddle中发布整个jQuery代码？进行查找-替换操作是什么意思？是的，这里有相当多的代码是链接，但出于某种原因，它似乎可以在放入JSFIDLE后工作，但在我的机器上不会work@Matthew看起来你的代码运行得很好。那么问题在哪里呢？
$(this).val() == "Damage <$100"