Question

我想根据选择下拉列表中选择的值执行搜索，但我不确定如何使用javascript执行该搜索。以下是我的代码。

<form name="countryOpt">
    <select name="region" id="region" onchange="">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>

    <div id="all">

        <select name="country" id="country" style="display: none;">
            <option value="http://www.google.com.my">Google</option>
        </select>

        <select name="country" id="state" style="display: none;">
            <option value="http://www.yahoo.com">Yahoo</option>
        </select>

        <select name="country" id="city" style="display: none;">
            <option value="http://www.facebook.com">Facebook</option>
        </select>

    </div>

    <input type="button" name="go" value="Search" onclick="window.location=document.countryOpt.country.options[document.countryOpt.country.selectedIndex].value" />
</form>

<script type="text/javascript">
$(window).load(function(){
$("select").change(function () {
   $("select option:selected").each(function () {
        if($(this).val() == "1") {
            $('#all select').css('display','none');
            $('#country').css('display','block');
        } else if($(this).val() == "2") {
            $('#all select').css('display','none');
            $('#state').css('display','block'); 
        } else if($(this).val() == "3") {
            $('#all select').css('display','none');
            $('#city').css('display','block');  
        }   
    });
});
});   
</script>

Answer 1

将您的javascript代码更改为此并尝试：

$(window).load(function()
{
    $("#region").change(function () 
    {
        $('select[name=country]').css('display','none');
        if($(this).val() == "1")
            $('#country').css('display','block');
        if($(this).val() == "2")
            $('#state').css('display','block');
        if($(this).val() == "3")
            $('#city').css('display','block');
    });
});

JSFiddle

Answer 2

也许你正在寻找这样的东西？

<form name="countryOpt">
    <select name="region" id="region">
        <option value="http://www.google.com.my">Google</option>
        <option value="http://www.yahoo.com">Yahoo</option>
        <option value="http://www.facebook.com">Facebook</option>
    </select>
    <input type="button" name="go" id="go" value="Search"/>
</form>
<script>
$(document).ready(function(){
    //Triggered by clicking the selectbox
    $("#region").change(function () {
        //window.location.href=$('#region').val();
      alert($('#region').val());
    });

    //Triggered by clicking the button
    $("#go").click(function () {
        //window.location.href=$('#region').val();
      alert($('#region').val());
    });
}); 
</script>

jsbin

onclick使用Button选择选项

2 个答案: