1

I try to load conditional value to a select tag based on the user's choice on a pervious form tag. it might require java or php. i am not competent in any of those two language. the logic is explain as the following.

<form>
  <input name="complaint" value="copyright" type="radio">copyright <br>
  <input name="complaint" value="trademark" type="radio">trademark <br>
  <input name="complaint" value="other_concern" type="radio"> other concerns
</form>


if complaint="copyright" then
<select>
  <option value="image">image</option>
  <option value="product">product</option>
</select>
elseif complaint="trademark" then
<select>
  <option value="item">item</option>
  <option value="image">image</option>
</select>
elseif complaint="other_concern"
<select>
  <option value="explain">explain</option>
</select>
end if

any solution?

Bingling Wang
  • 11
  • 3

1 Answers1

0

Heres a solution in Jquery. Add a class name to the inputs and hide the selct options by default 

<input name="complaint" value="copyright" type="radio" class="complaint">

then add unique ID tags to the select options along with a css class i like to use, .addClass and .removeClass are slighty faster and more efficent than .hide() and .show() selectors

Add the css at the bottom of your css sheet 

.hidden{position:absolute;width:0;height:0;overflow:hidden;visibility:0;padding:0;margin:0}

<select id="copyright" class="selectOptions hidden">
  <option value="image">image</option>
  <option value="product">product</option>
</select>

Finally add some JQuery You need to copy the remainder for your other hidden values

   $('.complaint').click(function() {
       $('.selectOptions').addClass('hidden');
       var checkComplaint = $(this).val();
        $('#' + checkComplaint).removeClass('hidden');
    });
Paddy
  • 772
  • 2
  • 11
  • 28
  • my friend has also send me a similar code like yours. but i have to add in order to make it work. it is not perfect, since it require the visit to other site. – Bingling Wang Aug 16 '16 at 10:16
  • Yep, Jquery is pretty lightweight though, images will alwasy be your main concern. You could download the Jquery and have it locally installed on your server. Then load it using the async comand, which means your page loads then executes the javascript so don't block the user experiance like so. You can change the Jquery3.js script to whatever you want. **** – Paddy Aug 17 '16 at 01:12