Question

我想在下拉菜单中添加一些简单的验证。例如，有3个下拉列表彼此包含数据。我想允许从每个下拉列表中选择一个项目。一旦用户选择了数据，就应该禁用下拉列表，以阻止用户在同一下拉列表中选择另一个项目。我尝试过但没有成功，

＆＃13;

my_condition = true;
var lastSel = $("#column1 option:selected");

$("#column1").change(function() {
  if (my_condition) {
    lastSel.attr("selected", true);
  }
});

$("#column1").click(function() {
  lastSel = $("#column1 option:selected");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="column1" class="text_select" name="column1" onChange="">
  <option value="">- Preferred Time -</option>
  <option value="- Sold Out -">- Sold Out -</option>
  <option value="2:30 - 4:00pm">2:30 - 4:00pm</option>
</select>
<select id="column2" class="text_select" name="column2" onChange="">
  <option value="">- Preferred Time -</option>
  <option value="- Sold Out -">- Sold Out -</option>
  <option value="2:30 - 4:00pm">2:30 - 4:00pm</option>
</select>

<select id="column3" class="text_select" name="column3" onChange="">
  <option value="">- Preferred Time -</option>
  <option value="- Sold Out -">- Sold Out -</option>
  <option value="2:30 - 4:00pm">2:30 - 4:00pm</option>
</select>

＆＃13;

Answer 1

好吧，你可以创建一个禁用元素的函数

function onChange(elem) {
    $(elem).prop("disabled",true);
}

将prop()用于布尔属性（没有值的布尔属性），例如disabled或readonly。

然后，使用该函数作为每个选择的onchange处理程序，将this作为第一个参数传递。 this将是正在更改的选择。

<select id="column1" class="text_select" name="column1" onchange="onChange(this);">

或者，更简单，从jQuery分配事件处理程序：

$("#column1,#column2,#column3").on("change",function() {
    $(this).prop("disabled",true);
});

如何在下拉列表中添加验证

1 个答案: