show or hide div depending on dynamic value in combo box jquery

Question

I have a combobox called select_person ={typeA, typeB}.

When an option is chosen I want to show other combobox has_id ={has_id, has_no_id}

Now depending on value chosen in typeA or typeB and depending on that has_id or has_no_id I want to show (or keep hidden) the respective div.

So If the registry happens to have an id and is typeA I will show only an input field, but if is typeA and has no ID i will display 3 input fields, same for typeB.

to do so I am doing something like:

$(function () {
    $('#select_person').change(function () {
        $('#has_id').show();
        if ($('#select_person').val() == 'typeA') {
            $("#has_id").append("<option>" + $("#typeA_has_id").val() + "</option>");
            $("#has_id").append("<option>" + $("#typeA_has_no_id").val() + "</option>");
        }

        if ($('#select_person').val() == 'typeB') {
            $("#has_id").append("<option>" + $("#typeB_has_id").val() + "</option>");
            $("#has_id").append("<option>" + $("#typeB_has_no_id").val() + "</option>");
        }


    });
});


$(function () {
    $('#has_id').change(function () {
        $('.persons').hide();
                $('#' + $(this).val()).show();
            });      

    });
});

and html

<Select id="select_person">
    <option value="0">Select person</option>
    <option value="typeA">typeA</option>
    <option value="typeB">typeB</option>
</Select>

<Select id="has_id" style="display:none"></Select>

<div id="person1" class="persons" style="display:none">
    <div class="form-left">Type A has id *</div>
    <input type="text" id="name" name="name" class="form-input"
    />
</div>
<div id="person1" class="persons" style="display:none">
    <div class="form-left">Type A has No id *</div>
    <input type="text" id="id" name="id" class="form-input"
    />
    <input type="text" id="name" name="name" class="form-input"
    />
    <input type="text" id="address" name="address" class="form-input"
    />
</div>

<div id="person2" class="persons" style="display:none">
    <div class="form-left">Type B has id *</div>
    <input type="text" id="nameB" name="nameB" class="form-input"
    />
</div>
<div id="person2" class="persons" style="display:none">
    <div class="form-left">Type B has No id *</div>
    <input type="text" id="idB" name="idB" class="form-input"
    />
    <input type="text" id="nameB" name="nameB" class="form-input"
    />
    <input type="text" id="addressB" name="addressB" class="form-input"
    />
</div>

but isnot working, could you help me out? here is the jsfiddle

Answer 1

you have extra }); at the end of the document...

you have two ids with a same name person1 ..which is invalid HTML markup.. either remove it..and use classes

updated from your comment

i have created this example fiddle..reading your comment not sure if this is what you want.. but i am sure this will get you started

fiddle here

Answer 2

One minor mistake : }); extra

http://jsfiddle.net/LEfbX/1/

$(function () {
    $('#has_id').change(function () {
        $('.persons').hide();
                $('#' + $(this).val()).show();
            });      

Answer 3

See what is happening in your code and html markup:

1. Your markup is invalid since it used same ids for multiple elements on same page.
2. Its also not clear how would you determine to put values in $("#typeA_has_id").val() .
3. and you had a }); extra closing at the end as mentioned in other answers as well.

and if you want to put some values in the option list of your $('#has_id') then you can try with this one.

$("<option/>").val('a').text('a').appendTo("#has_id");

Although i have done something if you would like to see:

FIDDLE

changed html:

<div id="person-A-withID" class="persons" style="display:none"></div>
<div id="person-A-withoutID" class="persons" style="display:none"></div>
<div id="person-B-withID" class="persons" style="display:none"></div>
<div id="person-B-withoutID" class="persons" style="display:none"></div>

jQuery:

$(function () {
   $('#has_id').show();
   $('#select_person').change(function () {
     $('.persons').hide();
     if ($('#select_person').val() == 'typeA') {
        $("#has_id").html('');
        $("<option/>").val('0').text('--Choose Type A--').appendTo("#has_id");
        $("<option/>").val('person-A-withID').text('person-A-withID').appendTo("#has_id");
        $("<option/>").val('person-A-withoutID').text('person-A-withoutID').appendTo("#has_id");
     }

     if ($('#select_person').val() == 'typeB') {
        $("#has_id").html('');
        $("<option/>").val('0').text('--Choose Type B--').appendTo("#has_id");
        $("<option/>").val('person-B-withID').text('person-B-withID').appendTo("#has_id");
        $("<option/>").val('person-B-withoutID').text('person-B-withoutID').appendTo("#has_id");
     }
  });

  $('#has_id').change(function () {
    $('.persons').hide();
    $('#' + $(this).val()).show();
  });
});