Question

我需要禁用Aspired下拉菜单中的选项。例如，用户为“当前”选择3，则选项1和2将被禁用。如果用户在“当前”中选择4，则选项1、2和3将被禁用，依此类推。我需要使用JavaScript创建逻辑的帮助。

<label>Current:</label>
<select name="Current">
  <option value="select">Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  </select>

<label>Aspired:</label>
<select name="Aspired">
  <option value="select">Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

Answer 1

这可能有助于您的逻辑。记住，这是ES6方式。

纯Js ES6版本

function onCurrentChange() {
  const options = document.getElementById("aspired").options;
  const listArray = Array.from(options);
  listArray.forEach(item => {
    if (item.value < document.getElementById("current").value) {
      item.disabled = true;
    }
  });
}

<label>Current:</label>
<select name="Current" id="current" onchange="onCurrentChange()">
  <option value="select">Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  </select>

<label>Aspired:</label>
<select name="Aspired" id="aspired">
  <option value="select">Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

向后兼容版本（IE9 +）版本

function onCurrentChange() {
  const options = document.getElementById("aspired").options;
  Array.prototype.forEach.call(options, function(child, index) {
    if (child.value < document.getElementById("current").value) {
      child.disabled = true;
    }
  });
}

<label>Current:</label>
<select name="Current" id="current" onchange="onCurrentChange()">
  <option value="select">Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  </select>

<label>Aspired:</label>
<select name="Aspired" id="aspired">
  <option value="select">Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

jQuery版本

function onCurrentChange() {
  $("#aspired option").each(function() {
    if ($(this).val() < $("#current").val()) {
      $(this).attr("disabled", true);
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Current:</label>
<select name="Current" id="current" onchange="onCurrentChange()">
  <option value="select">Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  </select>

<label>Aspired:</label>
<select name="Aspired" id="aspired">
  <option value="select">Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

Answer 2

现在不准备编写任何代码，但是可以在选择后使用JavaScript获取“当前”选择的值，为此可以为选项添加click事件监听器。要获取值，请签出此线程Get selected value in dropdown list using JavaScript? 从那里开始，使用基于第一个值的条件，使用它来自动填充有选择的选择元素的选项... 这可能有助于最后一步Adding options to select with javascript

Answer 3

如果可以使用Jquery。您需要从“当前选择”中选择所选择的值，例如n。然后循环执行，直到Aspired select中的值从1到n为止，并将'disabled attribute'添加为true

@SuppressLint("NewApi")
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    if (resultCode == RESULT_OK) {
        Uri mUri = data.getData();
        if (mUri != null) {
            String mFilePath;
            if (requestCode == 1) {
                mFilePath = mUri.getPath();
            } else {
                mFilePath = getPathFromURI(mUri);
            }
            Intent mIntent = new Intent(this, RestoreActivity.class);
            mIntent.putExtra("filepath", mFilePath);
            startActivity(mIntent);
        } else {
            Toast.makeText(this, "Something went wrong...\nPlease try again...", Toast.LENGTH_SHORT).show();
        }
    }
}

@SuppressLint("NewApi")
private String getPathFromURI(Uri mUri) {
    String mDocId = DocumentsContract.getDocumentId(mUri);
    String[] mSplit = mDocId.split(":");
    return Environment.getExternalStorageDirectory() + File.separator + mSplit[1];
}

<label>Current:</label>
<select name="Current">
  <option value="select">Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  </select>

<label>Aspired:</label>
<select name="Aspired">
  <option value="select">Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

Answer 4

function disFun(){

  var Aspired = document.getElementById("Aspired").options;
  var Current = document.getElementById("Current").value;
    
  for (var i=1;  i < +Current; i++) {
      Aspired[i].disabled = true;
  }

}

<label>Current:</label>
<select id="Current" name="Current" onchange="disFun()">
    <option value="select">Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    </select>

<label>Aspired:</label>
<select id="Aspired" name="Aspired">
    <option value="select">Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

基于第一个下拉菜单选项禁用第二个下拉菜单选项

4 个答案: