我有2个选择选项。如何才能根据第一个选择菜单中选择的内容显示第二个选择菜单选项？

时间：2016-06-12 18:32:00

标签： javascript jquery html ajax

https://jsfiddle.net/adm0L6x1/

＆＃13;
＆＃13; 
<div class="input-group" style="margin-left: 20px;">

  <select class="form-control" id="asd">
    <option></option>
    <option>BOSTON, MA</option>
    <option>FORT LEE, NJ</option>
    <option>HACKENSACK, NJ</option>
    <option>NEWARK, NJ</option>
    <option>NEY YORK CITY, NY</option>
    <option>NORTH ARLINGTON, NJ</option>
    <option>PHILADELPHIA, PA</option>
    <option>WASHINGTON, D.C</option>
  </select>

  <select class="form-control" id="asd">
    <option></option>
  </select>
</div>
＆＃13;
＆＃13;
＆＃13;

所以基本上我正在制作一个表单，这样用户就可以选择一个目的地去了。当我点击＆＃34; From＆＃34;中的选项时，我只希望某些选项显示在＆＃34; To＆＃34;中。例如，如果他们选择From：Boston，MA我也只想要纽约市和华盛顿特区出现。但如果我选择From：NYC，我只希望费城出现在那里。我看了几个jquery / javascript示例，但在这个确切的场景中找不到任何东西。

2 个答案:

答案 0 :(得分：1)

这很好用。您想在javascript中创建一个存储城市和目的地的配置对象。使用config填充FROM选择。然后在FROM选择中使用eventListener来获取所选值。最后清除并填充TO，使用配置中列出的新选择的值（目的地）进行选择。

var select1 = document.getElementById('select1');
var select2 = document.getElementById('select2');

// Config
// Key: City
// Value: Array of city destinations
var config = {
  'BOSTON, MA' : [ 'NEY YORK CITY, NY', 'WASHINGTON D.C.' ],
  'FORT LEE, NJ' : [ ],
  'HACKENSACK, NJ' : [],
  'NEWARK, NJ' : [ ],
  'NORTH ARLINGTON, NJ' : [],
  'NEY YORK CITY, NY' : [ 'PHILADELPHIA, PA' ],
  'PHILADELPHIA, PA' : [ ],
  'WASHINGTON D.C.' : [ ]
}

// add item method

var addItemToSelect = function (select, label) {
    var option = document.createElement('option');
    option.textContent = label;
    option.value = label;
    select.appendChild(option);
}

// populate select 1

for (var city in config) {
  addItemToSelect(select1, city);
}

select1.addEventListener('change', function () {

  // get selection's destinations
  var selection = this.options[this.selectedIndex].value;
  var destinations = config[selection];

  // clear select 2
  select2.length = 0

  // populate select 2
  addItemToSelect(select2, '');
  for (var key in destinations) {
    addItemToSelect(select2, destinations[key]);
  }

});

和HTML 

<div class="input-group" style="margin-left: 20px;">

  <div>
    <label>From</label>
    <select class="form-control" id="select1">
      <option></option>
    </select>
  </div>
  <div>
    <label>To</label>
    <select class="form-control" id="select2">
      <option></option>
    </select>
  </div>
</div>

这是一个小提琴：https://jsfiddle.net/33tcpLon/

答案 1 :(得分：0)

首先，你不应该使用同名的2个ID。

例如，将第二个ID更改为“asd1”，您可以执行以下操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>

        #MainPage {
            padding-left: 230px;
            padding-right: 230px;
        }

        body > #body-container {
            height: auto;
            min-height: 100%;
        }

        .pageData {
            display: table;
            table-layout: fixed;
            width: 100%;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        .PageInner {
            display: table-row;
        }

        .PageCard {
            margin: 0 0 10px;
            border: 0;
            background: #fff;
            box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        .gridItem {
            display: inline-block;
            margin-right: 10px;
            vertical-align: top;
            width: 196px;
            word-wrap: break-word;
        }

        #Pagebox {
            border-bottom: 1px solid #e2e2e2;
            padding-left: 18px;
            padding-right: 18px;
        }

        .UL-Slider {
            width: 100%;
            overflow: visible;
            position: relative;
            left: 0;
            white-space: nowrap;
            font-size: 0;
            vertical-align: top;
            -moz-transition: left .3s ease-in-out;
            -webkit-transition: left .3s ease-in-out;
            transition: left .3s ease-in-out;
        }

        .MovieItem {

            display: inline-block;
            margin-right: 10px;
            vertical-align: top;
            width: 196px;
            word-wrap: break-word;
        }

        .Video-CFix {
            font-size: 11px;
            color: #767676;
            position: relative;
        }

        .LockUp-Thumbnail {
            margin-bottom: 4px;
        }

        .VideoThumb {
            font-size: 0;
        }

        .VideoTitle {
            margin-right: 20px;
            font-size: 13px;
            margin-bottom: 1px;
            max-width: 196px;
        }


    </style>

</head>
<body>

<div id="body-container">
    <div id="MainPage">

        <div class="pageData">
            <div class="PageInner">

                <div class="PageCard">
                    <div class="gridItem">

                        <div id="Pagebox">
                            <ul class="UL-Slider">

                                <li class="MovieItem">

                                    <div class="Video-CFix">

                                        <div class="LockUp-Thumbnail">
                                            <div class="VideoThumb">
                                                <img src="http://www.amusingtime.com/images/043/mr-bean-funny-face-expression-image-for-facebook.jpg"
                                                     width="196" alt="" height="110">
                                            </div>
                                        </div>

                                        <div class="lockup-title">
                                            <span class="VideoTitle">
                                                <a href="#">Movie</a>
                                            </span>
                                        </div>

                                    </div>
                                </li>

                                <li class="MovieItem">

                                    <div class="Video-CFix">

                                        <div class="LockUp-Thumbnail">
                                            <div class="VideoThumb">
                                                <img src="http://www.amusingtime.com/images/043/mr-bean-funny-face-expression-image-for-facebook.jpg"
                                                     width="196" alt="" height="110">
                                            </div>
                                        </div>

                                        <div class="lockup-title">
                                            <span class="VideoTitle">
                                                <a href="#">Movie</a>
                                            </span>
                                        </div>

                                    </div>
                                </li>

                                <li class="MovieItem">

                                    <div class="Video-CFix">

                                        <div class="LockUp-Thumbnail">
                                            <div class="VideoThumb">
                                                <img src="http://www.amusingtime.com/images/043/mr-bean-funny-face-expression-image-for-facebook.jpg"
                                                     width="196" alt="" height="110">
                                            </div>
                                        </div>

                                        <div class="lockup-title">
                                            <span class="VideoTitle">
                                                <a href="#">Movie</a>
                                            </span>
                                        </div>

                                    </div>
                                </li>

                                <li class="MovieItem">

                                    <div class="Video-CFix">

                                        <div class="LockUp-Thumbnail">
                                            <div class="VideoThumb">
                                                <img src="http://www.amusingtime.com/images/043/mr-bean-funny-face-expression-image-for-facebook.jpg"
                                                     width="196" alt="" height="110">
                                            </div>
                                        </div>

                                        <div class="lockup-title">
                                            <span class="VideoTitle">
                                                <a href="#">Movie</a>
                                            </span>
                                        </div>

                                    </div>
                                </li>

                                <li class="MovieItem">

                                    <div class="Video-CFix">

                                        <div class="LockUp-Thumbnail">
                                            <div class="VideoThumb">
                                                <img src="http://www.amusingtime.com/images/043/mr-bean-funny-face-expression-image-for-facebook.jpg"
                                                     width="196" alt="" height="110">
                                            </div>
                                        </div>

                                        <div class="lockup-title">
                                            <span class="VideoTitle">
                                                <a href="#">Movie</a>
                                            </span>
                                        </div>

                                    </div>
                                </li>

                                <li class="MovieItem">

                                    <div class="Video-CFix">

                                        <div class="LockUp-Thumbnail">
                                            <div class="VideoThumb">
                                                <img src="http://www.amusingtime.com/images/043/mr-bean-funny-face-expression-image-for-facebook.jpg"
                                                     width="196" alt="" height="110">
                                            </div>
                                        </div>

                                        <div class="lockup-title">
                                            <span class="VideoTitle">
                                                <a href="#">Movie</a>
                                            </span>
                                        </div>

                                    </div>
                                </li>

                                <li class="MovieItem">
                                    <div class="Video-CFix">
                                        <div class="LockUp-Thumbnail">
                                            <div class="VideoThumb">
                                                <img src="http://www.amusingtime.com/images/043/mr-bean-funny-face-expression-image-for-facebook.jpg"
                                                     width="196" alt="" height="110">
                                            </div>
                                        </div>

                                        <div class="lockup-title">
                                            <span class="VideoTitle">
                                                <a href="#">Movie</a>
                                            </span>
                                        </div>
                                    </div>
                                </li>

                                <li class="MovieItem">
                                    <div class="Video-CFix">
                                        <div class="LockUp-Thumbnail">
                                            <div class="VideoThumb">
                                                <img src="http://www.amusingtime.com/images/043/mr-bean-funny-face-expression-image-for-facebook.jpg"
                                                     width="196" alt="" height="110">
                                            </div>
                                        </div>

                                        <div class="lockup-title">
                                            <span class="VideoTitle">
                                                <a href="#">Movie</a>
                                            </span>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

抱歉，忘了添加onchange方法：

在您的第一个选择元素中：

function foo() {
    var selectedElem = document.getElementById("asd");
    var selectedText = e.options[e.selectedIndex].text;

    var x = document.getElementById("asd1");
    var option = document.createElement("option");
    option.text = "Kiwi";
    x.add(option);
}
相关问题
最新问题