Question

我想让我的用户从我的数据库中订购一个选择，我在表单上创建了3个选择元素来完成它。

<select name="options1select">
  <option value="name">name</option>
  <option value="games">games</option>
  <option value="points">points</option>
</select>
<select name="piority1select">
  <option value="asc">asc</option>
  <option value="desc">desc</option>
</select>

<select name="options2select">
  <option value="name">name</option>
  <option value="games">games</option>
  <option value="points">points</option>
</select>
<select name="piority2select">
  <option value="asc">asc</option>
  <option value="desc">desc</option>
</select>

<select name="options3select">
  <option value="name">name</option>
  <option value="games">games</option>
  <option value="points">points</option>
</select>
<select name="piority3select">
  <option value="asc">asc</option>
  <option value="desc">desc</option>
</select>

让用户只选择一次名称，游戏或积分的最佳方法是什么？

我想要的是：如果用户在第一个选择中选择名称，他将无法在第二个和第三个选择名称。

Answer 1

如果您希望允许用户只选择一个项目，则应使用无线电而不是选择。

Answer 2

你好，也许你可以用jquery做到:(添加id =“smth”来使用它）

<script>
var selection = function () {
if ($("#putAnId").is(":checked")) {
    $(a"#theOtherId").removeAttr("disabled");
}
else {
    //other insctructions
}
};

$(selection);
$("#putAnId").change(selection);
</script>

Answer 3

工作小提琴：https://jsfiddle.net/q518o1pc/

如果你使用jQuery并在3个下拉列表中添加一个空白选项，你所要做的就是：

$("#options1select").on("change", function() {
     if ( $(this).val() == $("#options2select").val() ||
        $(this).val() == $("#options3select").val() ) {
        $(this).val("");
      } 
});

$("#options2select").on("change", function() {
     if ( $(this).val() == $("#options1select").val() ||
                            $(this).val() == $("#options3select").val() ) {
                    $(this).val("");
      } 
});

$("#options3select").on("change", function() {
     if ( $(this).val() == $("#options1select").val() ||
        $(this).val() == $("#options2select").val() ) {
            $(this).val("");
      } 
});

HTML将是：

<select name="options1select" id="options1select">
  <option value=""></option>
  <option value="name">name</option>
  <option value="games">games</option>
  <option value="points">points</option>
</select>
<select name="piority1select">
  <option value="asc">asc</option>
  <option value="desc">desc</option>
</select>

<select name="options2select" id="options2select">
<option value=""></option>
  <option value="name">name</option>
  <option value="games">games</option>
  <option value="points">points</option>
</select>
<select name="piority2select">
  <option value="asc">asc</option>
  <option value="desc">desc</option>
</select>

<select name="options3select" id="options3select">
<option value=""></option>
  <option value="name">name</option>
  <option value="games">games</option>
  <option value="points">points</option>
</select>
<select name="piority3select">
  <option value="asc">asc</option>
  <option value="desc">desc</option>
</select>

Answer 4

使用jQuery很简单。

使用$('select[name^=options]')您可以使用options

获取名称已启动的所有选项

使用$('select[name^=options] > option[value=' + $(this).val() + ']')在select下选择所有相同的选项并禁用所有选项（因为你选择禁用所有其他相同的选项）

另外，请禁用自己，以免再次更改。

$('select[name^=options]').on('change', function() {
  $('select[name^=options] > option[value=' + $(this).val() + ']').prop('disabled', true);
  $(this).prop('disabled', true);
})

$('select[name^=piority]').on('change', function() {
  $('select[name^=piority] > option[value=' + $(this).val() + ']').prop('disabled', true);
  $(this).prop('disabled', true);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="options1select">
  <option value=""></option>
  <option value="name">name</option>
  <option value="games">games</option>
  <option value="points">points</option>
</select>
<select name="piority1select">
  <option value=""></option>
  <option value="asc">asc</option>
  <option value="desc">desc</option>
</select>

<select name="options2select">
  <option value=""></option>
  <option value="name">name</option>
  <option value="games">games</option>
  <option value="points">points</option>
</select>
<select name="piority2select">
  <option value=""></option>
  <option value="asc">asc</option>
  <option value="desc">desc</option>
</select>

<select name="options3select">
  <option value=""></option>
  <option value="name">name</option>
  <option value="games">games</option>
  <option value="points">points</option>
</select>
<select name="piority3select">
  <option value=""></option>
  <option value="asc">asc</option>
  <option value="desc">desc</option>
</select>

表单选择元素选择唯一

4 个答案: