Question

我正在使用 3个选择框创建一个包含多个问题的网络表单。如果我从第一个选择下拉菜单中选择第一个问题，该问题将不会出现在第二个选择下拉菜单中。它也会与第3个选择下拉列表重复相同。

注意：主要目的是，如果用户从选择下拉列表中选择任何问题，则该问题不会出现在其他选择下拉列表中。

演示代码：

.margin-top-10 { margin-top: 1.0em; }
.margin-top-20 { margin-top: 2.0em; }
.margin-top-30 { margin-top: 3.0em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="row">
                        <div class="col-md-8 col-md-offset-2 col-xs-12">
                            <div class="panel panel-default">
                                <div class="panel-body">
                                    <div class="row margin-top-20">
                                        <div class="form-group">
                                            <label class="control-label col-sm-12 col-xs-12" for="">Question 1</label>
                                            <div class="col-sm-11 col-xs-12">
                                                <select class="form-control" id="sel1">
                                                    <option selected="">Choose your question</option>
                                                    <option>Select question 1</option>
                                                    <option>Select question 2</option>
                                                    <option>Select question 3</option>
                                                    <option>Select question 4</option>
                                                </select>
                                            </div>
                                            <div class="col-sm-11 col-xs-12 margin-top-10">
                                                <input type="text" class="form-control" placeholder="Type your answer">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row margin-top-20">
                                        <div class="form-group">
                                            <label class="control-label col-sm-12 col-xs-12" for="">Question 2</label>
                                            <div class="col-sm-11 col-xs-12">
                                                <select class="form-control" id="sel1">
                                                    <option selected="">Choose your question</option>
                                                    <option>Select question 1</option>
                                                    <option>Select question 2</option>
                                                    <option>Select question 3</option>
                                                    <option>Select question 4</option>
                                                </select>
                                            </div>
                                            <div class="col-sm-11 col-xs-12 margin-top-10">
                                                <input type="text" class="form-control" placeholder="Type your answer">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row margin-top-20">
                                        <div class="form-group">
                                            <label class="control-label col-sm-12 col-xs-12" for="">Question 3</label>
                                            <div class="col-sm-11 col-xs-12">
                                                <select class="form-control" id="sel1">
                                                    <option selected="">Choose your question</option>
                                                    <option>Select question 1</option>
                                                    <option>Select question 2</option>
                                                    <option>Select question 3</option>
                                                    <option>Select question 4</option>
                                                </select>
                                            </div>
                                            <div class="col-sm-11 col-xs-12 margin-top-10">
                                                <input type="text" class="form-control" placeholder="Type your answer">
                                            </div>
                                        </div>
                                    </div>
                
                                    <div class="row margin-top-20">
                                        <div class="col-xs-6 text-right">
                                            <a href="Create-Username-Password.html" class="btn btn-primary" role="button"> <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span> Back</a>
                                        </div>
                                        <div class="col-xs-6"><a class="btn btn-primary" role="button" href="Registration-Complete.html" name="btnGlassContactInfo">Register <span class="glyphicon glyphicon-ok"></span></a></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

Answer 1

如果更改代码中的select元素以使每个元素都具有唯一ID，则可能需要做的第一件事。他们现在都是sel1：）

然后，您需要将 onchange 事件绑定到将删除所选选项的选项。这是一个例子：

$('select').on('change', function() {
  var elem = this;
  var option = this.value;
  $('.form-control option').each(function() {
    if ($(this).html() === option && $(elem).attr('id') !== $(this).parent().attr('id')) {
      $(this).remove();
    }
  });
})

您可能希望禁止用户使用相同的选择元素，或者存储已删除的选项并在用户改变主意时将其添加回来。

我已在我的示例中禁用了它们，您可以在此处查看。 https://jsfiddle.net/martiensk/jwfeqrx0/

选定的下拉选项不会出现在另一个选择下拉列表中

1 个答案: