Dropdown list which excludes value selected in previous dropdown list: PHP

Question

I am new to web development, need help with PHP coding for a form.

A form with 5 dropdown list needs to be created. The values in 1st dropdown list would be "A,B,C,D,E,F,G". If suppose "C" is selected in 1st dropdown, then 2nd dropdown will have all the values except "C" ie; "A,B,D,E,F,G". If suppose we select "A" in second dropdown, the values shown in 3rd dropdown would be all the values except the value chosen in dropdown 1 & 2. So value in dropdown 3 would be "B,D,E,F,G.

Similarly, it will happen for other two dropdown boxes.

Answer 1

One way you could try is to keep track of what options need to be removed in an array. Then you could define which select controls which. Take this example:

given this html

<select id="a" var="b">
    <option>-- SELECT --</option>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
    <option value="d">d</option>
    <option value="e">e</option>
</select>

<select id="b" var="c" disabled>
    <option>-- SELECT --</option>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
    <option value="d">d</option>
    <option value="e">e</option>
</select>

<select id="c" disabled>
    <option>-- SELECT --</option>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
    <option value="d">d</option>
    <option value="e">e</option>
</select>

you could use this jquery

var doNotShow = [];

$('select').change( function() {

  var nextSelect = $(this).attr("var");

  doNotShow.push($(this).val());

  $.each(doNotShow, function( index, value ) {
    $("#" + nextSelect + " option[value='" + value + "']").prop('disabled', true);

  });

  $("#" + nextSelect).prop('disabled', false);
  $(this).prop('disabled', true);

});

doNotShow.push($(this).val()); keeps track of all the previously selected values, then the $.each removes (or in this case, disables) the unwanted options from the next select in line, which is stored in the select 's var property.

Here's an example.

Answer 2

这将使用jquery甚至Javasript完成，使用jQuery您可以阅读.change（）函数的文档，对于具有onchange属性的Javascript，请尝试阅读此问题，它将对您有所帮助： HTML SELECT-触发器即使选项未更改，JavaScript ONCHANGE事件