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

Question

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

<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 <-865是Black Tea的条目ID

我的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/Black Tea或/myshop/tea/Green Tea 。 是否可以在URL末尾附加entry_id ，例如/myshop/tea/865或/myshop/tea/123

Answer 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>

使更多的感觉。 使用表单小部件，因为它们应该被使用。

Answer 2

您不应该在select元素中包含td 。 此外，您需要将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>