Question

我一直在努力更好地掌握jQuery，并且已经提出了随机页面来测试其中的一些内容。我创建了一个小型模拟旅行社页面，其中包含一个表格，其中包含来源国和目的地国的选项默认的原点/目的地是美国，国家的第二个选项显示在它下面。当用户选择美国以外的其他内容时，状态选项会消失，Chrome中除外。

网站：http://www.stephenweigel.com/portfolio/somewheresomehow

脚本:(确实有$（document）.ready（function（），没想到我需要发布整个JS文件）

 $('#destination').click(function(){
            // Show US States if Destination is US
            var destination = $('#destination').val();
            var domestic = 'USA';

            if (destination == domestic) {
                $('#usDest').css("display","inline");
            } else {
                $('#usDest').css("display","none");
            }

HTML：

<div>
      <select name="destination" id="destination">
        <option value="USA" selected="selected">USA</option>
        <option value="Canada">Canada</option>
        <option value="Mexico">Mexico</option>
        <option value="Italy">Italy</option>
         <option value="France"> France </option>
        <option value="Spain"> Spain </option>
      </select> <!--end destination-->
     </div>
     <div>
     <select name="usDest" id="usDest">
        <option value="Alabama" selected="selected">Alabama</option>
            <option value="Alaska">Alaska</option>
            <option value="Arizona">Arizona</option>
            <option value="Arkansas">Arkansas</option>
            <option value="California">California</option>
            <option value="Colorado">Colorado</option>
            <option value="Connecticut">Connecticut</option>
            <option value="Delaware">Delaware</option>
            <option value="District of Columbia">District of Columbia</option>
            <option value="Florida">Florida</option>
            <option value="Georgia">Georgia</option>
            <option value="Hawaii">Hawaii</option>
            <option value="Idaho">Idaho</option>
            <option value="Illinois">Illinois</option>
            <option value="Indiana">Indiana</option>
            <option value="Iowa">Iowa</option>
            <option value="Kansas">Kansas</option>
            <option value="Kentucky">Kentucky</option>
            <option value="Louisiana">Louisiana</option>
            <option value="Maine">Maine</option>
            <option value="Maryland">Maryland</option>
            <option value="Massachusetts">Massachusetts</option>
            <option value="Michigan">Michigan</option>
            <option value="Minnesota">Minnesota</option>
            <option value="Missouri">Missouri</option>
            <option value="Montana">Montana</option>
            <option value="Nebraska">Nebraska</option>
            <option value="Nevada">Nevada</option>
            <option value="New Hampshire">New Hampshire</option>
            <option value="New Jersey">New Jersey</option>
            <option value="New Mexico">New Mexico</option>
            <option value="New York">New York</option>
            <option value="North Carolina">North Carolina</option>
            <option value="North Dakota">North Dakota</option>
            <option value="Ohio">Ohio</option>
            <option value="Oklahoma">Oklahoma</option>
            <option value="Oregon">Oregon</option>
            <option value="Pennsylvania">Pennsylvania</option>
            <option value="Rhode Island">Rhode Island</option>
            <option value="South Carolina">South Carolina</option>
            <option value="South Dakota">South Dakota</option>
            <option value="Tennessee">Tennessee</option>
            <option value="Texas">Texas</option>
            <option value="Utah">Utah</option>
            <option value="Vermont">Vermont</option>
            <option value="Virginia">Virginia</option>
            <option value="Washington">Washington</option>
            <option value="West Virginia">West Virginia</option>
            <option value="Wisconsin">Wisconsin</option>
            <option value="Wyoming">Wyoming</option>
      </select> <!-- end usDest-->
      </div>

也许我错过了一些东西，但它似乎很奇怪，它适用于Firefox，Safari和Internet Explorer 9但不适用于chrome。

我也尝试过使用：

  $('#origin').click(function(){
            var origin = $('#origin').val();
            var domestic = 'USA';

            if (origin == domestic) {
                $('#usOrigin').removeClass("invisible");
                $('#usOrigin').addClass("visible");
            } else {
                $('#usOrigin').removeClass("visible");
                $('#usOrigin').addClass("invisible");
            }

使用css：

.visible {
    display: inline;

}

.invisible {
    display: none;  
}

但是在chrome中也不起作用。（适用于其他浏览器）

任何建议将不胜感激。

Answer 1

您可以轻松使用hide()和show()来使用jQuery实现此效果。但根据人们在这里发布的内容，我猜测你遇到JS propagation的问题（代码中的错误）。这可能是由于错误的扩展引起的，这就是为什么你得到它，而没有其他人。在Incognito Mode中测试您的应用，以便轻松暂时停用扩展程序。使用CTRL + SHIFT + N

在Chrome中启动隐身模式

Answer 2

以下是我放在一起的内容：http://jsfiddle.net/XzQkb/。

<div>
    <select name="destination" id="destination">
        <option value="USA" selected="selected">USA</option>
        <option value="Canada">Canada</option>
        <option value="Mexico">Mexico</option>
        <option value="Italy">Italy</option>
        <option value="France"> France </option>
        <option value="Spain"> Spain </option>
    </select> <!--end destination-->
</div>
<div>
    <select name="usDest" id="usDest">
        <option value="Alabama" selected="selected">Alabama</option>
        <option value="Alaska">Alaska</option>
        <option value="Arizona">Arizona</option>
        <option value="Arkansas">Arkansas</option>
        <option value="California">California</option>
        <option value="Colorado">Colorado</option>
        <option value="Connecticut">Connecticut</option>
        <option value="Delaware">Delaware</option>
        <option value="District of Columbia">District of Columbia</option>
        <option value="Florida">Florida</option>
        <option value="Georgia">Georgia</option>
        <option value="Hawaii">Hawaii</option>
        <option value="Idaho">Idaho</option>
        <option value="Illinois">Illinois</option>
        <option value="Indiana">Indiana</option>
        <option value="Iowa">Iowa</option>
        <option value="Kansas">Kansas</option>
        <option value="Kentucky">Kentucky</option>
        <option value="Louisiana">Louisiana</option>
        <option value="Maine">Maine</option>
        <option value="Maryland">Maryland</option>
        <option value="Massachusetts">Massachusetts</option>
        <option value="Michigan">Michigan</option>
        <option value="Minnesota">Minnesota</option>
        <option value="Missouri">Missouri</option>
        <option value="Montana">Montana</option>
        <option value="Nebraska">Nebraska</option>
        <option value="Nevada">Nevada</option>
        <option value="New Hampshire">New Hampshire</option>
        <option value="New Jersey">New Jersey</option>
        <option value="New Mexico">New Mexico</option>
        <option value="New York">New York</option>
        <option value="North Carolina">North Carolina</option>
        <option value="North Dakota">North Dakota</option>
        <option value="Ohio">Ohio</option>
        <option value="Oklahoma">Oklahoma</option>
        <option value="Oregon">Oregon</option>
        <option value="Pennsylvania">Pennsylvania</option>
        <option value="Rhode Island">Rhode Island</option>
        <option value="South Carolina">South Carolina</option>
        <option value="South Dakota">South Dakota</option>
        <option value="Tennessee">Tennessee</option>
        <option value="Texas">Texas</option>
        <option value="Utah">Utah</option>
        <option value="Vermont">Vermont</option>
        <option value="Virginia">Virginia</option>
        <option value="Washington">Washington</option>
        <option value="West Virginia">West Virginia</option>
        <option value="Wisconsin">Wisconsin</option>
        <option value="Wyoming">Wyoming</option>
    </select> <!-- end usDest-->
</div>

和

$("#destination").on("change", function () {
    $("#usDest").toggle($(this).val() === "USA");
});

jQuery .css不在chrome中工作，但在FF，Safari，IE9中工作

2 个答案: