1

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" i.e; "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.

user3495200
  • 13
  • 3

2 Answers2

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.

Adunahay
  • 1,551
  • 1
  • 13
  • 20
0

This will be done with jquery or even with Javasript, with jQuery you can read the documentation of .change() function, and for Javascript with the onchange Attribute, try to read this question it will help you a little bit : HTML SELECT - Trigger JavaScript ONCHANGE event even when the option is not changed

Community
  • 1
  • 1
rsm23
  • 84
  • 1
  • 13