javascript - 如何在菜单外部添加单击按钮以打开新的文本字段，而不是单击 "other"？

Question

我不知道如何使用下拉菜单外部的单击按钮(可能是加号)而不是单击“其他”，以便用户可以输入另一个值？谢谢!!

这是 html:

<form onsubmit="FormSubmit(this);">
<label for="last_name">Brand:</label>
<input type="hidden" name="brand" />
<select name="fruit_ddl" onchange="DropDownChanged(this);">
<option value="">--select--</option>
<option value="brand1">Brand1</option>
<option value="brand2">Brand2 </option>
<option value="brand3">Brand3</option>
<option value="">Other..</option>

</select> <input type="text" name="brand_txt" style="display: none;" />
<button type="submit">Add Brand</button>
</form>

JavaScript:

function DropDownChanged(oDDL) {
    var oTextbox = oDDL.form.elements["brand_txt"];
    if (oTextbox) {
        oTextbox.style.display = (oDDL.value == "") ? "" : "none";
        if (oDDL.value == "")
            oTextbox.focus();
    }
}

function FormSubmit(oForm) {
    var oHidden = oForm.elements["brand"];
    var oDDL = oForm.elements["brand_ddl"];
    var oTextbox = oForm.elements["brand_txt"];

    if (oHidden && oDDL && oTextbox)
        oHidden.value = (oDDL.value == "") ? oTextbox.value : oDDL.value;
}

Answer 1

是this fiddle做你想要的吗？我保留了“其他”选项，加号按钮只是选择它。(我必须更改“其他”值，因为它与空值相同。)

我基本上用这个 onclick 处理程序添加了一个加号按钮:

function PlusClick(btn) {
    var ddl = btn.form.elements["fruit_ddl"];
    ddl.value = "-";    
    DropDownChanged(ddl);
}

编辑:这是another fiddle ，删除了“其他”选项。