获取下拉菜单的值并使用JS显示选项

时间:2014-04-23 16:43:58

标签: javascript html

一旦用户选择了他们想要的口味,我希望能够在网页上显示一条消息,其中包含在点击提交按钮后从下拉列表中做出的选择。以下是我到目前为止的情况:

<select name="flavour1" required>
    <option value="">Please select a Flavour!</option>
    <option value="apple">Apple</option>
    <option value="strawberry">Strawberry</option>
    <option value="lemon">lemon</option>
    <option value="pear">Pear</option>
    <option value="cola">Cola</option>
    <option value="lime">Lime</option>
</select>

<select name="flavour2" required>
    <option value="">Please select a Flavour!</option>
    <option value="noflavour">No More Flavours!</option>
    <option value="apple">Apple</option>
    <option value="strawberry">Strawberry</option>
    <option value="lemon">lemon</option>
    <option value="pear">Pear</option>
    <option value="cola">Cola</option>
    <option value="lime">Lime</option>
</select>

      <input type="submit" value="Get your Flavour!!" onclick="getFlavour()">

JavaScript尝试将消息显示到带有id的元素:&#34; postFlavour&#34;

function getFlavour(){
        var flavour1 = getElementById("flavour1").value;
        var flavour2 = getElementById("flavour1").value;

        document.getElementById("postFlavour").innerHTML = "Congratulations, here are your chosen flavours: "+flavour1+", "+flavour2;
    }

1 个答案:

答案 0 :(得分:0)

function getFlavour(){
    var sel1 = getElementById("flavour1");
    var sel2 = getElementById("flavour2");

    var flavour1 = sel1.options[sel1.selectedIndex];
    var flavour2 = sel2.options[sel2.selectedIndex];

    document.getElementById("postFlavour").innerHTML = "Congratulation, here are your chosen flavours: "+flavour1+", "+flavour2;
    return false;
}
相关问题