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

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();
});

我最终采取的做法是将该值分配为我的页面的URL。看起来效果很好。感谢大家的帮助。

- Gerico

---

你能展示一下你尝试过什么吗？ - Mitya

Answer 1

两个选择：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()); 
});​

- Tats_innit

---

@Raminson 兄弟，嗨！最近怎么样啊？很难见到你、thecodeplex 和 gdoron 这些人了 :) 我快要睡觉了 B-)。 - Tats_innit

放心，老兄！我认为你的问题应该得到赞同 +1，不应该被点踩:)你的意思是重定向到一个页面吗？ - Tats_innit

所以有大约8个选项，每个选项都是用户选择查看的单独页面。那么有没有一种好的方法可以处理这个问题而不需要大量的代码呢？+谢谢 - Gerico

@Mat-visual cooloeos，如果我理解得正确，这里有两个选项：1) 请查看这里（根据所选选项进行重定向）：https://dev59.com/DkzSa4cB1Zd3GeqPnH4u 2) 如果页面只是简单的divs，则可以使用.show和hide api。我认为，如果这是一个全新的问题，花一些时间仔细思考一下，并且从这个问题和答案中得到一个好的起点，然后再提出清晰的问题，无论如何都会有帮助 :) 如果它对你有帮助，请随意发布 :P - Tats_innit

我在这里BRO :), 很难见到你！？哈哈，_thecodeplex_是谁？ :) - Ram

Answer 2

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

工作中的JSFiddle

- Michael Robinson

Answer 3

这是一个例子，它将获取值并将浏览器重定向到带有传递的id选择的其他页面。

function doSomething()
{
    var seleciton = parseInt($("#my-dropdown").val());

    if(isNaN(selection) || selection <= 0) // Additional verification
    {
        alert("Please select valid option.");
        return;
    }

    window.location.href = 'http://somewhereelse.com/something?id=' + selection;
}

- Rolice

Answer 4

这里有一个快速示例，展示如何使用普通的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>

- WhoaItsAFactorial

Answer 5

你可以使用以下代码来实现你的想法：

var selected = $('#my-dropdown option:selected').val(); 
// prints the **value** of the option clicked in the dropdown
    
var selected = $('#my-dropdown option:selected').html(); 
// prints the **text** of the option clicked in the dropdown

当下拉菜单被选中时，可以使用以下任何一种方法进行调用：

$('.go-btn').click(function() { // JQuery Click
    var selected = $('#my-dropdown option:selected').val();
    console.log(selected); 
});​

// If you prefer not to have a button but need the functionality:
// HTML
<select id="my-dropdown" name="my-dropdown" onchange="getUserValue()">
            <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>

//JQuery
function getUserValue() {
    var selected = $('#my-dropdown option:selected').val();
    alert(selected);
}

- Du-Lacoste

Answer 6

我想这应该足够了。

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

- AdityaParab

Answer 7

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

}  
// do what you want here
});

- coolguy