CODEWITHSUNDEEP
javascriptjqueryhtmlforms
web-tiki
web-tiki

Reputation: 103770

Choose fields to hide/show acording to selected option in dropdown (while edit)

EDITED : (corected code mistake)

I have created a form with several fields, chosen via a dropdown.

This works fine and I can save the data to database.

But the problem is that when I need to edit the data with the form, the jQuery "change" function isn't triggered and the fields shown aren't selected with the dropdown (value of the dropdown is save too).

How can I achieve this? Maybe another jQuery function would be better?

This is my markup and code:

html:

<body>
<div class="div1">
    <label class="label1">label1</label>
    <select id="select">
        <option value="option1">option1</option>
        <option value="option2">option2</option>
        <option value="option3">option3</option>
    </select>
</div>
<div class="div2">
    <label class="label2">label2</label>
    <input type="text" name="input1" class="input1">
</div>
<div class="div3">
    <label class="label3">label3</label>
    <input type="text" name="input2" class="input2">
</div>
<div class="div4">
    <label class="label4">label4</label>
    <input type="text" name="input3" class="input3">
</div>
<div class="div5">
    <label class="label5">label5</label>
    <input type="text" name="input4" class="input4">
</div>
</body>

jQuery: 

$(document).ready(function() {
    $('.div2').hide();
    $('.div3').hide();
    $('.div4').hide();
    $('.div5').hide();

    $('#select').change(function () {
        if ($('#select option:selected').text() == "option1"){
            $('.div2').show();
            $('.div3').hide();
            $('.div4').hide();
            $('.div5').show();
        }
        else if ($('#select option:selected').text() == "option2"){
            $('.div2').hide();
            $('.div3').show();
            $('.div4').hide();
            $('.div5').show();
        }
        else if ($('#select option:selected').text() == "option3"){
            $('.div2').hide();
            $('.div3').hide();
            $('.div4').show();
            $('.div5').show();
        }
    }); 
});
</script>

JSFiddle: http://jsfiddle.net/YNnCw/

Upvotes: 1

Views: 7070

Answers (2)

itsNotABlanket
itsNotABlanket

Reputation: 138

If you are willing to use jQuery, I wrote a little script to do just that. This is just a simple little function to show the data which matches the chosen option in the select with choose Option. First it hides all the option class items, then is shows the items with the class which equals the chosen option. The id is the class of all the options used for this instance. This allows you to have more than one of these on a page. You can look at the example below.

The rows in the form show or don't show based on the classes. For example . The "optionName" in the div class is the same as the ID of the master selector, and thus gets hidden. If the selection value is option3 then that div will show.

Option Type:

                <select name="optionName" id="optionName" class="chooseOption">
                <option value = "" >Select a Type</option>
                <option value = "option1">option1</option>
                <option value = "option2">option2</option>
                <option value = "option3">option3</option>
                </select>

<div class = "optionName option1"> option1 stuff</div>
<div class = "optionName option2"> option2 stuff</div>
<div class = "optionName option3"> option3 stuff</div>

<script type="text/javascript">
     $(".optionName").hide();

$("document").ready(function() {   /// have to wait till after the document loads to run these things

    $("select.chooseOption").change(function(){
        $("."+this.id).hide();
        var thisValue = $(this).val();
        if (thisValue != "")
        $("."+thisValue).show();
    });
});

</script>

Upvotes: 4

Daniele
Daniele

Reputation: 1938

You make a mistake it should be:

$('#select option:selected').text()

here the updated fiddle

Upvotes: 3

Related Questions