1

我正在尝试创建一个动态页面，该页面根据下拉选择进行更改。所以对于设置，我有两个下拉菜单。描述它的最简单方法是国家和州下拉菜单。我想要它，以便在选择特定状态时，将单独的DIV填充有关该状态的信息。现在这只是一个例子，但它几乎是我正在寻找的。我已经使用一些简单的 Javascript 和数组设置了两个下拉列表来填充它们。

<script type="text/javascript">
var postState = '';
var postCountry = '';

var state = '\
US:AK:Alaska|\
US:AL:Alabama|\
US:AR:Arkansas|\
';

var country = '\
US:United States|\
';

function populateCountry(defaultCountry) {
  if ( postCountry != '' ) {
    defaultCountry = postCountry;
  }
  var countryLineArray = country.split('|');  // Split into lines
  var selObj = document.getElementById('countrySelect');
  selObj.options[0] = new Option('Select Country','');
  selObj.selectedIndex = 0;
  for (var loop = 0; loop < countryLineArray.length; loop++) {
    lineArray = countryLineArray[loop].split(':');
    countryCode  = TrimString(lineArray[0]);
    countryName  = TrimString(lineArray[1]);
    if ( countryCode != '' ) {
      selObj.options[loop + 1] = new Option(countryName, countryCode);
    }
    if ( defaultCountry == countryCode ) {
      selObj.selectedIndex = loop + 1;
    }
  }
}

function populateState() {
  var selObj = document.getElementById('stateSelect');
  var foundState = false;
  // Empty options just in case new drop down is shorter
  if ( selObj.type == 'select-one' ) {
    for (var i = 0; i < selObj.options.length; i++) {
      selObj.options[i] = null;
    }
    selObj.options[0] = new Option('Select State','');
    selObj.selectedIndex = 0;
  }
  // Populate the drop down with states from the selected country
  var stateLineArray = state.split("|");  // Split into lines
  var optionCntr = 1;
  for (var loop = 0; loop < stateLineArray.length; loop++) {

    lineArray = stateLineArray[loop].split(":");
    countryCode  = TrimString(lineArray[0]);
    stateCode    = TrimString(lineArray[1]);
    stateName    = TrimString(lineArray[2]);
  if (document.getElementById('countrySelect').value == countryCode && countryCode != '' ) {
    // If it's a input element, change it to a select
      if ( selObj.type == 'text' ) {
        parentObj = document.getElementById('stateSelect').parentNode;
        parentObj.removeChild(selObj);
        var inputSel = document.createElement("SELECT");
        inputSel.setAttribute("name","state");
        inputSel.setAttribute("id","stateSelect");
        parentObj.appendChild(inputSel) ;
        selObj = document.getElementById('stateSelect');
        selObj.options[0] = new Option('Select State','');
        selObj.selectedIndex = 0;
      }
      if ( stateCode != '' ) {
        selObj.options[optionCntr] = new Option(stateName, stateCode);
      }
      // See if it's selected from a previous post
      if ( stateCode == postState && countryCode == postCountry ) {
        selObj.selectedIndex = optionCntr;
      }
      foundState = true;
      optionCntr++
    }
  }
function initCountry(country) {
  populateCountry(country);
  populateState();
}
</script>

我对 Javascript 不是很好，所以就我所知。如果有更简单的方法来填充下拉列表，我完全赞成。我在 PHP 方面非常有经验，所以我希望有某种交叉来显示内容。

重申一下，我有两个下拉菜单。选择 1 中的选项，2 中会出现不同的选项。单击 2 中的选项，信息会显示在下面的 DIV 中。用户应该能够继续选择选项和显示信息。

4

1 回答 1

0

您需要考虑使用 AJAX 执行此操作。数据集太大了，真的，无法在本地存储所有数据。将使用jQuery编写我的回复，为了教学，我将稍微简化一下。首先，当我们的状态发生变化时，我们需要一个函数（请注意，您可以编写一个汇总函数来完成这一切，但我认为您还没有达到那个水平）

function changeDrop1() {
    var country = $('#mydrop1').val();
    $.getJSON('/your/ajax/file/?country=' + country, function(data) {
         $('#mydrop2').empty();
         $.each( data, function( key, val ) {
            var opt = $('<option/>', {'value':key }).text(val);
            $('#mydrop2').append(opt);
         });
    });
}

我的假设是您的 AJAX 将轮询传递的国家/地区返回一个像这样的 JSON 对象

{ "AL":"Alabama", "AK":"Alaska" }

当您的脚本通过国家/地区时，您会以这种格式返回状态，您可以使用每个状态来迭代它们并填充下拉列表 2。这里的最后一部分是如何触发它。在您的页面中，您将添加

$(document).ready(function() {
     $('#mydrop1').change( changeDrop1(); });
});

现在，当您的下拉值更改时，您会触发 AJAX 来填充下拉 2。我希望这一切都有意义。您可以重复使用相同的技术来检查下拉列表 2 并填充您的 div。

于 2013-10-17T02:39:18.447 回答