Question

  <div class="selCont">
        <h2>pick an option</h2>
        <select id="my-dropdown" name="my-dropdown">
            <option value="0">Please Select</option>
            <option value="1">West</option>
            <option value="2">Land</option>
            <option value="3">Easter</option>
            <option value="4">Springtime</option>
            <option value="5">Celtic</option>
            <option value="6">Spectacular/</option>
            <option value="7">Weekend</option>
            <option value="8">Dark</option>
            <option value="9">Treasures</option>
        </select>
        <button class="go-btn" type="submit">
        Go
        </button>
</div>

所以基本上我希望能够让用户选择一个选项，并在点击go按钮时，运行脚本并查看下拉列表的值并使用该值将它们发送到相关页面。

我一直在尝试一些事情但是它还没有完全融合在一起。任何帮助一如既往的赞赏。

修改

http://jsfiddle.net/TmfyC/ - 以下是我最近在其中一条评论的帮助下尝试的内容。

* 我为可能受益的人使用了什么 *

$('.go-btn').click(function() {
    window.location = $('#my-dropdown').val();
});

这就是我最终做的事情，然后我将该值指定为我的网页的网址。似乎像一种享受。谢谢你的帮助。

Answer 1

2件事：http://jsfiddle.net/xSyF2/1/ 或 http://jsfiddle.net/xSyF2/

<强>码

$('.go-btn').click(function() {
    var selected = $('#my-dropdown option:selected');
    alert(" If you want text ==>"  + selected.html()); 
});

或

$('.go-btn').click(function() { alert(" If you just want value ==>" + $('#my-dropdown').val()); });

Answer 2

这是一个使用普通javascript而不是jquery来实现它的方法的快速示例。

<script type="text/javascript">

    function goToProperPage() {
        var url;
        var location = document.getElementById("my-dropdown").selectedIndex;
        if (location == 1) {
            url = 'http://www.page.com/west';
        }
        else if (location == 2) {
            url = 'http://www.page.com/land';
        }
        window.location.href=url;
    }

</script>

<div class="selCont">
    <h2>pick an option</h2>
    <select id="my-dropdown" name="my-dropdown">
        <option value="0">Please Select</option>
        <option value="1">West</option>
        <option value="2">Land</option>
        <option value="3">Easter</option>
        <option value="4">Springtime</option>
        <option value="5">Celtic</option>
        <option value="6">Spectacular/</option>
        <option value="7">Weekend</option>
        <option value="8">Dark</option>
        <option value="9">Treasures</option>
    </select>
    <button class="go-btn" type="submit" onclick="javascript:goToProperPage();"> Go </button>
</div>

Answer 3

$('.go-btn').click(function() {
    var selected = $('#my-dropdown option:selected');
    if (selected.length) {
        // Do something with your selection
        alert(selected.val());
    }
});

Working JSFiddle

Answer 4

我想这应该足够了。

$(".go-btn").on('click',function(){
             alert($("#my-dropdown").val());
});

Answer 5

$('.go-btn').click(function(){
if($('#my-dropdown').val() == 0 ){
 alert('Please select an option');
return false;

}  
// do what you want here
});

点击按钮获取选择值并执行某些操作

5 个答案: