Question

I wanted to do the following:

Having a select box,

<select name="some" id="some">
    <option value="xx">xx</option>
    <option value="yy">yy</option>
    <option value="ww">ww</option>
    <option value="zz">zz</option>
    <option value="uu">uu</option>
</select>

And when I select the option xx, open another select box

<select name="some_xx" id="some_xx">
    <option value="xx">xx</option>
    <option value="yy">yy</option>
    <option value="ww">ww</option>
</select>

Then, If I select in the some_xx the YY or WW or XX option it loads some html info ( a form ). ANd in the some select if I select the others options (not xx) it also loads some html info ( a form ).

All the forms are different, so I would like to load an external file with all the forms, is it possible? How to do all of this?

I know it will involve some javascript, but I really don’t know how and I’ve searched quite a bit and seen some functions like load() and create selects but can’t figure it out.

Thanks in advance

edit: I have this code but it’s not dynamic and it’s not working right…

<script>
$(function(){ 
       function changeForm($(this)) {
            $('#form').load('$(this).html');
       }  

       function changeForm_xx($(this)) {
            $('#form2').load('$(this).html');
       } 

      $('#some').change(function() {
           changeForm($(this));
      });    
      $('#some_xx').change(function() {
           changeForm_xx($(this));
      });
});
</script>

And also, I want to remove the load content when I change the select

UPDATE: working: close

Answer 1

change it to like this. you have many errors in your script . see Demo : JsFiddle Demo

Error List

1. function changeForm($(this)) // here you added Extra parenthesis and as Jquery obj.

2. $('#form2').load('$(this).html') // this is wrong. you need to call as below . it is yourObj.html() method.

    function changeForm(obj) {
      var someVar= $(obj).html();
           $('#form').load(someVar); //here you perform load Operation. 
   
      }  
   
      function changeForm_xx(obj) {
         var someVar= $(obj).html();
           $('#form').load(someVar); //here you perform load Operation. 
      }
   
     $('#some').change(function() {
          changeForm($(this));
     });    
     $('#some_xx').change(function() {
          changeForm_xx($(this));
     });