onclick使用按钮选择选项

onclick using Button for select option

本文关键字：选择 选项 按钮 onclick      更新时间：2023-09-26

我想执行基于选择下拉列表中所选值的搜索，但我不确定如何使用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>

修改你的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

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

<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

相关文章：