stackoom
  简体   繁体   中英

How to display a chunk of text specific to the drop-down option selected?

 原文  2014-04-05 11:38:58  7   2    javascript/ jquery/ html/ text/ drop-down-menu

Question

I've been researching on how to do this and can't get anything to work for me. I have the following code in my HTML page: 

<div id="one" style="border:solid 1px black;width:150px;background-color:#faebd7;display:none;"><p>DIV ID=one</p></div>
            <div id="two" style="border:solid 1px black;width:150px;background-color:#ffe4c4;display:none;"><p>DIV ID=two</p></div>
            <div id="three" style="border:solid 1px black;width:150px;background-color:#fae3d7;display:none;"><p>DIV ID=three</p></div>
            <div id="four" style="border:solid 1px black;width:150px;background-color:#ffe424;display:none;"><p>DIV ID=four</p></div>
            <select name="ContentListBox" id="ContentListBox" onchange="javascript:ShowDiv();">
                <option value="">Select Team</option>
                <option value="one">One</option>
                <option value="two">Two</option>
                <option value="three">Three</option>
                <option value="four">Four</option>
            </select>

I then have a Javascript file with the following code: 

     function ShowDiv(){
                safeToggleFieldDisplay(document.getElementById('one'),'none');
                safeToggleFieldDisplay(document.getElementById('two'),'none');
                safeToggleFieldDisplay(document.getElementById('three'),'none');
                safeToggleFieldDisplay(document.getElementById('four'),'none');

                var dropdown = document.getElementById("ContentListBox");
                var index = dropdown.selectedIndex;
                var selectedDIV = dropdown.options[index].value;
                safeToggleFieldDisplay(document.getElementById(selectedDIV),'flip');
            }

            function safeToggleFieldDisplay(field, sVisibility){
                try{
                    if((field) && (field.style)){
                        if (sVisibility=='flip'){
                            if (field.style.display == 'none'){
                                sVisibility = 'block'; }
                            else {
                                sVisibility = 'none'; }
                        }
                        field.style.display = sVisibility;
                    }
                }
                catch(exception){
                    //no handling - just preventing page explosions
                }
            }

I followed this code from a tutorial. At the moment, only a drop-down menu appears on my page. When I select an option, no text box appears. Could anyone please assist me and identify why?

Many thanks

2 answers

solution1
 0  2014-04-05 11:48:18

You have tagged jQuery so I am assuming you are using it somewhere but why not here?

Got what you wanted in a lot less code than that.

HTML: 

<div id="one">Div one</div>
<div id="two">Div two</div>
<div id="three">Div three</div>
<div id="four">Div four</div>

<select>
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
    <option value="four">Four</option>
</select>

Javascript: 

$('select').change(function(){
    var value = $(this).val();
    showDiv(value);
});

function showDiv(id) {
    if(id == 'one') {
        $('#one').show();
        $('#two,#three,#four').hide();
    } else if (id == 'two') {
        $('#two').show();
        $('#one,#three,#four').hide();
    } else if (id == 'three') {
        $('#three').show();
        $('#one,#two,#four').hide();
    } else if (id == 'four') {
        $('#four').show();
        $('#one,#two,#three').hide();
    }
}

DEMO

solution2
 0 ACCPTED  2014-04-05 11:51:48

Hard to pinpoint the problem without seeing how you have it all coming together, but it works for me putting the JS into the head of the document... 

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            function ShowDiv() {
                safeToggleFieldDisplay(document.getElementById('one'), 'none');
                safeToggleFieldDisplay(document.getElementById('two'), 'none');
                safeToggleFieldDisplay(document.getElementById('three'), 'none');
                safeToggleFieldDisplay(document.getElementById('four'), 'none');

                var dropdown = document.getElementById("ContentListBox");
                var index = dropdown.selectedIndex;
                var selectedDIV = dropdown.options[index].value;
                safeToggleFieldDisplay(document.getElementById(selectedDIV), 'flip');
            }

            function safeToggleFieldDisplay(field, sVisibility) {
                try {
                    if ((field) && (field.style)) {
                        if (sVisibility == 'flip') {
                            if (field.style.display == 'none') {
                                sVisibility = 'block';
                            }
                            else {
                                sVisibility = 'none';
                            }
                        }
                        field.style.display = sVisibility;
                    }
                }
                catch (exception) {
                    //no handling - just preventing page explosions
                }
            }

        </script>
    </head>
    <body>

        <div id="one" style="border:solid 1px black;width:150px;background-color:#faebd7;display:none;"><p>DIV ID=one</p></div>
            <div id="two" style="border:solid 1px black;width:150px;background-color:#ffe4c4;display:none;"><p>DIV ID=two</p></div>
            <div id="three" style="border:solid 1px black;width:150px;background-color:#fae3d7;display:none;"><p>DIV ID=three</p></div>
            <div id="four" style="border:solid 1px black;width:150px;background-color:#ffe424;display:none;"><p>DIV ID=four</p></div>
            <select name="ContentListBox" id="ContentListBox" onchange="javascript:ShowDiv();">
                <option value="">Select Team</option>
                <option value="one">One</option>
                <option value="two">Two</option>
                <option value="three">Three</option>
                <option value="four">Four</option>
            </select>

    </body>
</html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question how to display table shortcode with a drop-down list that depends on the selected option in another drop-down list How do I display Text in HTML based on an option selected from a Drop-Down Menu? How to document.write when specific option selected from drop-down menu How to set auto selected option in drop-down with current time? How to display the selected text value from (select drop-down) without reload the page or using button Drop-down get Selected item Text Show input text-box on the row of the table when an option is selected on a drop-down list How to check if drop-down is selected in JavaScript Change items in a drop-down list depending on the selected option in another drop-down list Drop-down box dependent on the option selected in another drop-down box
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM