Question

我是jQuery和CSS的新手。

我正在做一个简单的应用程序。我的要求是，我有两个选择按钮，当我点击第一个选择按钮值时，相应的值将出现在第二个选择按钮。

我在第一个选择按钮中有5个值，并且我只对前两个值有相应的值。但是我没有在第二个选择按钮中为其他3个值提供任何相应的值。

这意味着当我点击第一个选择按钮的第一个值时，相应的值将出现在第二个选择按钮中，同样将是第二个值，但是当我点击其中任何一个（3,4， 5）那么在那种情况下我应该禁用第二个选择按钮，因为我没有最后一个值的任何相应值。

编码

<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();
        var options = $(this).data('options').filter('[value=' + id + ']');
         $('#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" onchange="change();">
                    <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>
        <tr class="gridAlternateRow">
        <td><b>Quantity</b></td>
            <td>
            <input type="text" />
            </td>
        </tr>
        <tr>
            <td>
            <b>Description</b>
            </td>           
            <td>
            <div class="row">
                    <textarea cols="5" rows="3" style="width:650px;"></textarea>
                </div>
            </td>
         </tr>
        <tr class="gridAlternateRow">
        <td><b>Reason</b></td>
            <td>
            <textarea cols="5" rows="3" style="width:650px;"></textarea>
            </td>
        </tr>
        <tr>
        <td><b>File Upload</b></td>
            <td>
              <div class="row">
                   <input type="file" name="somename" size="chars"> 
                 </div>
                </td>
           </tr>
        </table>
    <div class="btnSection">
        <a class="btnPrimary" href="" title="Button">SUBMIT</a>
        <a class="btnPrimary" href="" title="Button">RESET</a>
       </div>
       </div>
      </div>
    </div>
  </div>

  .gridAlternateRow td {
        background:#f3f6f8;
                      }
             .row {
               clear: both;
               overflow: hidden;
               padding: 4px 0;
                }

任何人都可以告诉我如何解决这个问题吗？

Answer 1

我们去......

如果您打算使用select＃2返回的值，则应使其选项值唯一。

仅用于测试目的并建议您解决方案：

<select id="select1">
    <option value="0">--Please select</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
</select>
<select id="select2">
    <!-- The data-value here is to link both selects. -->
    <option value="0" data-value="0" selected>--Please select</option>
    <option value="1" data-value="1">Option 1/1</option>
    <option value="2" data-value="1">Option 1/2</option>
    <option value="3" data-value="1">Option 1/3</option>
    <option value="4" data-value="2">Option 2/1</option>
    <option value="5" data-value="2">Option 2/2</option>
    <option value="6" data-value="3">Option 3/1</option>
    <option value="7" data-value="3">Option 3/2</option>
</select>

...

$(function () {
    // Keep the select #2 default options.
    var currentOptions = $("#select2 > option").clone();

    // When the select #1 changes.
    // Note that this is replacing the onchange you've 
    // placed in the markup before.
    $("#select1").on("change", function () {
        // Restore the default options for the select #2.
        $("#select2").empty().append(currentOptions);

        var selectedValue = $(this).val();

        // Nothing selected, just return.
        if (selectedValue == 0) {
            return;
        }

        // Filter the select #2 valid options by matching
        // their data-value with the select #1 value.
        // Also include the first option (-- Please select).
        var validOptions = $("#select2 > option").filter(function () {
            var thisVal = $(this).data("value");

            return (thisVal == 0 || thisVal == selectedValue);
        });

        // Clean up the select #2 and add the valid options.
        $("#select2").empty().append(validOptions);

        // If the select #2 contains just one option, disable it.
        $("#select2").prop("disabled", $("#select2").find("option").length == 1);
    });
});

Demo

Answer 2

请使用以下jquery代码

Jquery的

var $drop1 = $("#drop1");
var $drop2 = $("#drop2");
$drop1.change(function () {

    var value = $(this).val();
    if ($("#drop2 option[value = '" + value + "']").length) {
        $drop2.prop("disabled", false);
        $drop2.val(value);
    } else $drop2.prop("disabled", true);
});

HTML

<select id="drop1">
    <option value="1">first</option>
    <option value="2">Second</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>
<select id="drop2">
    <option value="1">first</option>
    <option value="2">Second</option>
    <option value="3">Three</option>
</select>

JSFIDDLE DEMO

Answer 3

**JSFIDDLE**

<强> demo

Here is the **sample demo jquery select button disable** ,you can try to follow this you will get solution and good understanding 


var myId;

$('select').change(function() {
    $this = $(this);
    myId = $this.attr('id');
    myVal = $this.val();
    if (myId == 'dropDown1') {
        $('select').prop('disabled',false);
        if (myVal == 1) {
            $('#dropDown4').prop('disabled', true);
        }else if (myVal == 2) {
            $('#dropDown3').prop('disabled', true);
        }else if (myVal == 3) {
            $('#dropDown2').prop('disabled', true);
        }
    }
});

Answer 4

在页面顶部添加javascript文件。

<script type="text/javascript" src="jquery.min.js"></script>

将jquery.min.js下载到您的文件夹

将css放入<style></style>

Answer 5

试试这个：

<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').prop("disabled",true);
        }else{

            $('#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>
        <tr class="gridAlternateRow">
        <td><b>Quantity</b></td>
            <td>
            <input type="text" />
            </td>
        </tr>
        <tr>
            <td>
            <b>Description</b>
            </td>           
            <td>
            <div class="row">
                    <textarea cols="5" rows="3" style="width:650px;"></textarea>
                </div>
            </td>
         </tr>
        <tr class="gridAlternateRow">
        <td><b>Reason</b></td>
            <td>
            <textarea cols="5" rows="3" style="width:650px;"></textarea>
            </td>
        </tr>
        <tr>
        <td><b>File Upload</b></td>
            <td>
              <div class="row">
                   <input type="file" name="somename" size="chars"> 
                 </div>
                </td>
           </tr>
        </table>
    <div class="btnSection">
        <a class="btnPrimary" href="" title="Button">SUBMIT</a>
        <a class="btnPrimary" href="" title="Button">RESET</a>
       </div>
       </div>
      </div>
    </div>
  </div>

希望它有所帮助。

Answer 6

这是你想要实现的吗？ DEMO

我已将此添加到您的JS：

 var disable_id = [ 3,4,5 ]; 
 $('#select2').html(options); //This line is in your original code
  if ( jQuery.inArray(id-1, disable_id) != -1 ) {
      $("#select2").attr('disabled', true);
  } else {
      $("#select2").attr('disabled', false);
  }

如何在单击另一个选择按钮的值后禁用选择按钮

6 个答案: