Question

我有2个选择，我想做的是（没有刷新页面）：用户从第一个选择（value1或value2）中选择一个值的那一刻改变第二个选择：如果他选择了value1，那么他有一个选择值a，b，c，d;如果他选择了value2，那么他可以选择第二个选择e，f，g，h。如果没有刷新页面，这可能吗？

编辑：我知道你们都不在这里为别人写代码;只是想保持简单而不是发布我所有凌乱的代码:)。那么，我想要做的是修改第二个选择id = selectAccessiblePaths和onchange函数applyGroupSelection（）

function initDivWithConfig () {
  divWithInfo = document.createElement('div');
  divWithInfo.class = 'divWithInfoControls';
  divWithInfo.style.position = 'absolute';
  divWithInfo.style.top = '10px';
  divWithInfo.style.width = '100%';
  divWithInfo.style.textAlign = 'center';
  var groupToDisplay = '<p id="pSelectGroup" style="display: block;">Select the user group: ';
  groupToDisplay += '<select id="selectGroup" onchange="applyGroupSelection()">';
  groupToDisplay += '<option selected>Nothing selected</option>';
  for ( var g in userGroups ) {
    groupToDisplay += '<option>' + g + '</option>';
  }   
  groupToDisplay += '</select></p>';
  divWithInfo.innerHTML += groupToDisplay;
  groupSelected = 'group1';
  var accessiblePathsToDisplay = '<p id="pSelectAccessiblePaths" style="display: none;">Select the accessible paths: ';
  accessiblePathsToDisplay += '<select id="selectAccessiblePaths" onchange="applyAccessiblePathsSelection()">';
  accessiblePathsToDisplay += '<option selected>Nothing selected</option>';
  for ( var ap=0; ap<userGroups[ groupSelected ].accessiblePaths.length; ap++ ) {
    var pathsForThisGroup = userGroups[ groupSelected ].accessiblePaths[ ap ][ "ns0:svg" ][ "groupPathsName" ];
    accessiblePathsToDisplay += '<option>' + pathsForThisGroup + '</option>';
  }  
  accessiblePathsToDisplay += '</select></p>';
  divWithInfo.innerHTML += accessiblePathsToDisplay;
  document.body.appendChild( divWithInfo );
}

function applyGroupSelection () {
  groupSelected = "group2";
  hideUnhideObject( "pSelectGroup" );
  hideUnhideObject( "pSelectAccessiblePaths" );
}

Answer 1

使用HTML，CSS和JavaScript系列轻松：

<强> HTML ：

<select id='firstselect' onchange="document.getElementById('secondselect').className=this.value">
    <option value='select'>Select a value</option>
    <option value='value1'>Value1</option>
    <option value='value2'>Value2</option>
</select>

<select id='secondselect'>
    <option value='a'>a</option>
    <option value='b'>b</option>
    <option value='c'>c</option>
    <option value='d'>d</option>
    <option value='e'>e</option>
    <option value='f'>f</option>
    <option value='g'>g</option>
    <option value='h'>h</option>
</select>

<强> CSS ：

#secondselect, #secondselect option {
    display: none;
}

#secondselect.value1, #secondselect.value2 {
    display: block;
}

.value1 option[value="a"], .value1 option[value="b"], .value1 option[value="c"], .value1 option[value="d"] {
    display: block !important;    
}

.value2 option[value="e"], .value2 option[value="f"], .value2 option[value="g"], .value2 option[value="h"] {
    display: block !important;    
}

请参阅操作：http://jsfiddle.net/nukz3ns3/

<强>已更新：此外，您可以在firstselect更改时执行更改为默认值的功能：

function setSecondSelect( select ){
    var secondselect = document.getElementById('secondselect');
    secondselect.className=select.value;
    secondselect.selectedIndex = (select.value === 'value1')?0:4;
}

了解它的工作原理：http://jsfiddle.net/nukz3ns3/1/

Answer 2

是的，可以使用ajax post方法。

Answer 3

是的，如果您使用ajax，则可能。 http://api.jquery.com/jquery.ajax/

Answer 4

试试这个：

<script type="text/javascript">
     $(document).ready(function () {
         $("#select1").change(function() { 
          if($(this).data('options') == undefined){
           $(this).data('options',$('#select2 option').clone());} 

        var id = $(this).val();
       // alert(id);
        var options = $(this).data('options').filter('[value=' + id + ']');

        if(options.val() == undefined){
            //$('#select2').hide();
            $('#select2').prop("disabled",true);
        }else{
            //$('#select2').show();
            $('#select2').prop("disabled",false);
         $('#select2').html(options);
        }
      });
   });

</script>



<div class="pageCol1">
        <div class="panel">
        <div class="templateTitle">Request for Items</div>  
        <table class="grid" border="0" cellspacing="0" cellpadding="0">
            <tr class="gridAlternateRow">
                <td><b>Item to be Request</b></td>
                <td>
                <select name="select1" id="select1">
                        <option value="1">--Select--</option>
                        <option value="2">Stationaries</option>
                        <option value="3">Computer Accessories</option>
                        <option value="4">Bottle</option>
                        <option value="5">Chair</option>
                        <option value="6">Office File</option>
                        <option value="7">Phone Facility</option>
                        <option value="8">Other Facilities</option> 
                </select>
              </td></tr>
              <tr><td>
              <b>Category</b>
              </td> 
              <td>  
                <select name="select2" id="select2" >
                  <option value="1">--Select--</option>
                    <option value="2">Note Books</option>
                    <option value="2">Books</option>
                    <option value="2">Pen</option>
                    <option value="2">Pencil</option>
                    <option value="2">Eraser</option>
                    <option value="2">Drawing sheets</option>
                    <option value="2">Others</option>
                    <option value="3">Laptop</option>
                    <option value="3">PC</option>
                    <option value="3">CPU</option>
                    <option value="3">Monitor</option>
                    <option value="3">Mouse</option>
                    <option value="3">Keyboard</option>
                    <option value="3">Mouse Pad</option>
                    <option value="3">Hard Disk</option>
                    <option value="3">Pendrive</option>
                    <option value="3">CD/DVD Writer</option>
                    <option value="3">RAM</option>
                    <option value="3">Mother Board</option>
                    <option value="3">SMPS</option>
                    <option value="3">Network Cables</option>
                    <option value="3">Connectors</option>
                    <option value="7">Land Line</option>
                    <option value="7">BlackBerry </option>
                    <option value="7">Other</option>
                  </select> 
                </td>
            </tr>
</table>
</div>
</div>
</div>

您的HTML可以是您所需的格式。

Answer 5

如果您尝试填充现有选项中的第二个选项，尝试在change处理程序

上使用filter()

  $("firstselect").change(function() {
        var options = $("secondselect").filter(function() { 
    //return the options you want to display
        });
        $("secondselect").html(options);
   });

或者如果要从服务器检索选项，请使用AJAX并形成选项并按上述方式进行innerHTML。

选择的<select>值可以修改另一个</select>吗？

5 个答案: