Question

我有两个具有相同值的下拉选择。我正在从源（左）单元到目标（右）单元构建转换器。转换为类似单位是没有意义的。我知道如何在下拉列表中添加事件选择从备用框中删除所选选项但我不清楚写这个以产生最佳的UI体验。给出以下裁剪的案例：

<select name="srcUnit" id="srcUnit">
    <option value="Unit 1">Unit 1</option>
    <option value="Unit 2">Unit 2</option>
    <option value="Unit 3">Unit 3</option>
</select>

<select name="dstUnit" id="dstUnit">
    <option value="Unit 1">Unit 1</option>
    <option value="Unit 2">Unit 2</option>
    <option value="Unit 3">Unit 3</option>
</select>

接近这个可能是最佳做法？如果您选择“单元2”的来源，目的地应如何反应，将其删除？然后我需要一个重置按钮，或者如果您在目的地中选择“单元2”，将源反射到其他东西（这看起来更糟糕和直观）？

忘记这一点，只是在提交时验证？

Answer 1

检查每个下拉列表更改事件的新值。

如果在另一个下拉列表中也选择了该值，请将另一个下拉列表的值移至下一个（或默认值）选项。

为了给用户一个他不应该选择相同值两次的线索，使在另一个下拉列表中已经选择的值变灰。

我已经为您编写了代码，这是一个可执行代码段：

＆＃13;

$("#srcUnit, #dstUnit").change(function(){
    /*Detect wether we have srcUnit or dstUnit */
    if($(this).attr("id") == "srcUnit"){var otherUnit = "dstUnit";}
    else{var otherUnit = "srcUnit";}
    /*Save new Value*/
    var newVal = $(this).children("option:selected" ).val();
    /*Select next option in other dropdown if it's old value was selected*/
    if(newVal == $("#"+otherUnit+" option:selected").val()){  
       $('#'+otherUnit+' option:selected').removeAttr('selected').next().attr('selected', 'selected');
    }
    /*Update UI*/
    $('#'+otherUnit+' option').removeClass("disabled");
    $('#'+otherUnit+' option[value="'+newVal+'"]').addClass("disabled");
});

＆＃13;

.disabled {
  color: #ccc;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="srcUnit" id="srcUnit">
    <option value="Unit 1" selected>Unit 1</option>
    <option value="Unit 2">Unit 2</option>
    <option value="Unit 3">Unit 3</option>
</select>

<select name="dstUnit" id="dstUnit">
    <option value="Unit 1" class="disabled">Unit 1</option>
    <option value="Unit 2" selected>Unit 2</option>
    <option value="Unit 3">Unit 3</option>
</select>

＆＃13;

我编辑了我的答案以更好地适应这个问题，旧答案：

使用HTML 5禁用属性。

<select name="srcUnit" id="srcUnit">
    <option value="Unit 1">Unit 1</option>
    <option value="Unit 2" selected>Unit 2</option>
    <option value="Unit 3">Unit 3</option>
</select>

<select name="dstUnit" id="dstUnit">
    <option value="Unit 1">Unit 1</option>
    <option value="Unit 2" disabled>Unit 2</option>
    <option value="Unit 3">Unit 3</option>
</select>

了解详情并在此处试用：http://www.w3schools.com/tags/att_option_disabled.asp

使用javascript订阅下拉列表的onchange事件，并根据需要切换属性。

两个下拉菜单替代约束的最佳方法

1 个答案: