admin管理员组

文章数量:1323342

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: /

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/YNnCw/

Share Improve this question edited May 12, 2016 at 12:52 web-tiki asked Aug 22, 2013 at 15:24 web-tikiweb-tiki 104k33 gold badges224 silver badges257 bronze badges 6
  • Can you provide jsfiddle example? – Dom Commented Aug 22, 2013 at 15:27
  • 1 Added it here: jsfiddle/YNnCw/2 – Mark Commented Aug 22, 2013 at 15:28
  • @MarkWylde not even your question and you are all over it! Thank you for the assistance, sir. Cheers! – Dom Commented Aug 22, 2013 at 15:30
  • @chadocat you should change it back to original mistake and put EDITED version below, since the Daniele answer doesn't make sense now. Just an FYI ;) – Tatarin Commented Aug 22, 2013 at 15:36
  • sorry, couldn't do that but put edited at the bigining btw thx for the jsfiddle! – web-tiki Commented Aug 22, 2013 at 15:42
 |  Show 1 more ment

2 Answers 2

Reset to default 4

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>

You make a mistake it should be:

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

here the updated fiddle

本文标签: javascriptChoose fields to hideshow acording to selected option in dropdown (while edit)Stack Overflow