国家/州Javascript_Javascript_Jquery

国家/州Javascript

javascript jquery

国家/州Javascript,javascript,jquery,Javascript,Jquery,我在寻找一个国家选择框，下面有一个国家的州和省的文本框。但是，如果在“选择”框中选择了“美国”或“加拿大”，则该文本框将替换为具有美国或加拿大州或省选项的新的相应选择框。（取决于选择）基本上，如果美国被选中，显示一个新的选择与美国。。。如果选择了加拿大，则在加拿大省份中显示新的选择。。。如果选择了其他国家，只需显示文本框，即可输入其所在地区在浏览了整个站点之后，我与下面显示的代码相当接近。div显示正确，但是如果我在美国div或加拿大div中放入选择框，它会将其破坏所以，对于这个显示，

我在寻找一个国家选择框，下面有一个国家的州和省的文本框。但是，如果在“选择”框中选择了“美国”或“加拿大”，则该文本框将替换为具有美国或加拿大州或省选项的新的相应选择框。（取决于选择）

基本上，如果美国被选中，显示一个新的选择与美国。。。如果选择了加拿大，则在加拿大省份中显示新的选择。。。如果选择了其他国家，只需显示文本框，即可输入其所在地区

在浏览了整个站点之后，我与下面显示的代码相当接近。div显示正确，但是如果我在美国div或加拿大div中放入选择框，它会将其破坏

所以，对于这个显示，我只是在这个例子中留下了文本，以便有一个有效的例子。如果您能在美国和加拿大的div中找到它为什么会破裂的原因，我们将不胜感激

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Using Selectbox</title>
<style type="text/css"></style>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
</head>
<body>
<script type="text/javascript">
    $(document).ready(function(){
        $("select").change(function(){
            $( "select option:selected").each(function(){
                if($(this).attr("value")=="ca"){
                    $(".box").hide();
                    $(".ca").show();
                }
                else if ($(this).attr("value")=="us"){
                    $(".box").hide();
                    $(".us").show();
                }
                 else if(($(this).attr("value")!="us") || ($(this).attr("value")=="ca")){
                    $(".box").hide();
                    $(".any").show();
                }
            });
        }).change();
    });
</script>
<div>
  <select>
    <option>choose country</option>
    <option value="ca">Canada</option>
    <option value="us">USA</option>
    <option value="mx">Mexico</option>
    <option value="Albania">Albania</option>
    <option value="Aruba">Aruba</option>
  </select>
</div>
<div style="display:none;" class="ca box"><strong>Canada  Province Select Box...</strong></div>
<div style="display:none;" class="us box"><strong>United States State Select Box</strong></div>
<div style="display:none;" class="any box"  >Enter your Region:<br><input name="state" type="text"></div>
</body>
</html>


jQuery使用Selectbox显示隐藏
$（文档）.ready（函数（）{
$（“选择”）.change（函数（）{
$（“选择选项：选定”）。每个（函数（）{
如果（$（this.attr（“value”）=“ca”）{
$（“.box”）.hide（）；
$（“.ca”）.show（）；
}
else if（$（this.attr（“value”）=“us”）{
$（“.box”）.hide（）；
$（“.us”）.show（）；
}
else if（$（this.attr（“value”）！=“us”）| |（$（this.attr（“value”）=“ca”））{
$（“.box”）.hide（）；
$（“.any”）.show（）；
}
});
}).change（）；
});
选择国家
加拿大
美国
墨西哥
阿尔巴尼亚
阿鲁巴
加拿大省选择框…
美国州选择框
输入您所在的地区：

这是因为您的javascript针对页面上的每个select元素

使用更独特的选择器

<select id="country">
    <option>cho`enter code here`ose country</option>
    <option value="ca">Canada</option>
    <option value="us">USA</option>
    <option value="mx">Mexico</option>
    <option value="Albania">Albania</option>
    <option value="Aruba">Aruba</option>
</select>

是的，我刚刚用两行代码替换了您的事件处理程序

如果没有您正在使用的确切代码，很难判断您使用的代码是否已损坏，但我猜可能是因为您选择的事件将与其连接，因此基本上您也会自行运行更改，从而导致意外行为

如果将不起作用的版本放到JSFIDLE中，它将更容易使用并给出更准确的答案。

我制作了一个修补程序来修复您的代码

首先，您只需要使用

.change（）

一次

那么您就不需要在

$（“选择选项：已选定”）

$（“选择选项：选定”）.val（）

将检索该值

在

show（）

div之后，使用如下值

var selectedCountry = $( "select option:selected").val();

 $('.'+selectedCountry).show();

编辑：更新的小提琴

修正了错误。sry

$('.box').hide(); // outside if()

另一种方法是：

$(document).ready(function(){
    $('select').on('change', function(){

        var with_select = ['ca', 'us'];  // easy to manage values that
                                         // require selects

        var val = $(this).val();         // this kind of things makes it more
                                         // easy

        $('.box').hide();                // hide all boxes. the code runs fast
                                         // enough

        for( var i in with_select ){
            if( with_select[i] == val ){ // we check through the array **if** the   
                $('.' + val).show();     // value matches. in that case we show
                return false;            // the required select and return false 
            }                            // to exit of method
        }

        $('.any').show();                // **else** we show the text input

    });  
});

简短但不适用于其他国家/地区，输入文本从不show@MamaWalter-只需在选项中添加一个值，它就可以正常工作->可能我错了，但如果我选择了div（类“any”），输入文本永远不会显示。@MamaWalter-你是对的，我没有正确阅读问题，假设OP也会为这些国家添加盒子。我使用了五个国家的变体，当提交时，来自“隐藏”国家的空格被提交，导致表单提交数据显示国家，后跟逗号。例如，在提交美国时，生成的数据如下所示：US、、、以下是无法与div中的两个简单选择框一起使用的代码。谢谢大家的帮助。工作正常，但如果先选择“美国”，然后选择“墨西哥”，则“美国”下拉列表将保留在viewsry中。我把小提琴修好了谢谢，现在很好用。非常感谢。

$(document).ready(function(){
    $('select').on('change', function(){

        var with_select = ['ca', 'us'];  // easy to manage values that
                                         // require selects

        var val = $(this).val();         // this kind of things makes it more
                                         // easy

        $('.box').hide();                // hide all boxes. the code runs fast
                                         // enough

        for( var i in with_select ){
            if( with_select[i] == val ){ // we check through the array **if** the   
                $('.' + val).show();     // value matches. in that case we show
                return false;            // the required select and return false 
            }                            // to exit of method
        }

        $('.any').show();                // **else** we show the text input

    });  
});