Javascript - 将选项的参数附加到由下拉菜单检索的 URL答案

【问题标题】：Javascript - Append a parameter of an option to URL retrieved by a dropdown menuJavascript - 将选项的参数附加到由下拉菜单检索的 URL
【发布时间】：2012-12-01 16:21:57
【问题描述】：

我有一个下拉菜单。我用它来选择一种特定的茶。

<form name="barcode" onSubmit="return OnSubmitForm();" method="post">

    <select name="entry_id" id="entry_id">
        <option selected="selected">Select a tea</option>
        <td><option entry_id="865"> Black Tea</option></td>
        <td><option entry_id="123"> Green Tea</option></td>
    </select>

    <input type="submit" value="Tea story">
</form>

然后我想使用 javascript 来检索所选 Tea 的entry_id 并将其附加到 URL 的末尾，例如/myshop/tea/865

我的 Javascript 代码：

<SCRIPT language="JavaScript">
    function OnSubmitForm()
    {
        alert('inside');
        var eid = document.getElementById('entry_id').value;
        alert(eid);
        document.barcode.action ="https://www.myshop.ca/tea/" + eid;
    }
</SCRIPT>

但每次它都会附加“红茶”或“绿茶”名称，例如 /myshop/tea/Black Tea 或 /myshop/tea/Green Tea。有没有办法在 URL 的末尾附加 entry_id，例如/myshop/tea/865 或 /myshop/tea/123

【问题讨论】：

标签： javascript url append option

【解决方案1】：

<form name="barcode" onSubmit="return OnSubmitForm();" method="post">

    <select name="entry_id" id="entry_id">
       <option selected="selected">Select a tea</option>
       <option value="865">Black Tea</option>
       <option value="123">Green Tea</option>
    </select>

    <input type="submit" value="Tea story">
    </form>

更有意义。使用应该使用的表单小部件。

【讨论】：

非常感谢。有用。谢谢你的建议。我多次剪切和粘贴表格。它把事情搞砸了。再次感谢。我会接受你的回答并给分。

【解决方案2】：

您不应该在选择元素中包含tds。此外，您需要将option 元素的value 属性设置为所需的ID。例如：

<select name="entry_id" id="entry_id">
   <option selected="selected">Select a tea</option>

   <option value="865"> Black Tea</option>

   <option value="123"> Green Tea</option>
</select>

【讨论】：