Question

我正在使用国家/地区选择框，其中包含国家/地区和省份的文本框。但是，如果在选择框中选择了美国或加拿大，则文本框将替换为具有美国或加拿大州或省选项的新对应选择框。（取决于选择）

基本上，如果选择美国，请显示状态的新选择... 如果选择加拿大，请显示加拿大省的新选择... 如果选择了其他任何国家/地区，只需显示可以输入其区域的文本框。

在网站上反弹之后，我已经合理地接近了下面显示的代码。 Divs显示正常，但是如果我在美国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>

Answer 1

这是因为您的javascript定位于页面上的每个选择元素。

使用更独特的选择器

<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>

并定位

$("#country").change(function(){
    $(".box").hide();
    $("." + this.value).toggle(['ca','us'].indexOf(this.value)!=-1);
    $(".any").toggle(['ca','us'].indexOf(this.value)==-1);
});

是的，我刚用两行替换了你的事件处理程序！

FIDDLE

Answer 2

如果没有你使用的确切代码那么很难说，但是我的猜测是因为你的选择事件会被它连接起来，所以基本上你最终还是会自己运行这个改变，导致出乎意料的行为。

如果您要将非工作版本放入JSFiddle，那么可以更容易地使用并提供更准确的答案。

Answer 3

我做了一个修补你的代码http://jsfiddle.net/DP2n2/1/

的小提琴

首先，您需要.change()只有一次

然后您each()

上不需要$( "select option:selected")

$( "select option:selected").val()将检索值

以及show()之后带有该值的div

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

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

编辑：更新了小提琴http://jsfiddle.net/DP2n2/2/

修复了错误。 sry ..

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

Answer 4

另一种方法：

$(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

    });  
});

http://jsfiddle.net/UBf8e/

国家/州Javascript

4 个答案: