如何基於html中的另一個選擇選項來操縱選擇選項？

Question

我有兩個選擇標簽（都是一樣的）：

<select class="form-control" name='end'>
    <option selected disabled hidden value="">end</option>

    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
</select>

在這里，如果我從第一個下拉列表中選擇一個選項，則在第二個下拉列表中，直到所選的所有選項都不會顯示。 例如，如果我在第一個下拉列表中選擇5，則第二個下拉列表應僅顯示6-11。 誰能幫我這個？

JSFIDDLE

Answer 1

您需要添加一個onchange事件偵聽器，並使用第一個選擇的值在第二個選擇中循環並隱藏選項。

使用jQuery：

var max = 0;
var options = $("select[name='end']").find('option');

$("select[name='start']").on('change', function() {

    options.each(function(){
        $(this).show();
    });

    max = parseInt( $(this).val() );

    for (i=0; i < max; i++) {
        $(options[i]).hide();
    }

});

Answer 2

為您的選擇提供ID，例如： #firstSelect和#secondSelect我使用jquery做出了此解決方案，因為它比使用普通javascript更為簡單。 嘗試這個：

 $("#firstSelect").change(function () {
      var selectedOption = $("select option:selected").text();
      $("#secondSelect option").each(function() {
        var txtOption = $(this).text();
        if(parseInt(txtOption) <= parseInt(selectedOption)){ 
          $(this).remove();
        }
      });
});

---

如果您希望此操作不止一次，那么當您再次更改第一個時，第二個將再次更改，並從一開始就添加或刪除新鮮的選項：

$("#firstSelect").change(function () {
    var selectedOption = $("select option:selected").text();
    $("#secondSelect").empty();
    for (var index = 2; index < 12; index++) {
        if(index >= parseInt(selectedOption)){
            $("#secondSelect").append(
                $('<option></option>').html(index)
            );
        }
    }
});

檢查for循環中的索引，這些索引從2到12進行硬編碼。您也可以執行同樣的操作。 但是，如果在第一個下拉列表中始終有選項1,2,3 ... 9,10，則應該可以正常工作。

Answer 3

您需要將更改事件偵聽器與名稱為start的選擇下拉列表關聯，以便從該下拉列表中選擇每個選項時，您可以像這樣在end下拉列表中show/hide該option 。 另外，記下parseInt() ，它將把option值作為一個整數進行比較，並為您提供正確的結果。

 $('select[name="start"]').change(function(){ var selectedValue = parseInt($(this).val()); changeEndOptions(selectedValue); }); function changeEndOptions(startValue){ var $options = $('select[name="end"] option'); $options.each(function(){ var optionVal = parseInt($(this).val()); if(optionVal <= startValue){ $(this).hide(); } else { $(this).show(); } }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="form-control" name='start'> <option selected disabled hidden value="">start</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> </select> <select class="form-control" name='end'> <option selected disabled hidden value="">end</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> <option>11</option> </select>