www.webdeveloper.com
Results 1 to 11 of 11

Thread: adress a specific drop-down list in javascript

  1. #1
    Join Date
    Apr 2012
    Posts
    5

    adress a specific drop-down list in javascript

    Hi,

    I am a software developer, but I am not very familiar with HTML and Javascrift.

    I have to change something on a javascrift function (private use).

    It addresses a drop-down list:

    <div class="irgendwas">
    <select name="nspreselect">
    <option id="1">1</option>
    <option id="2">2</option>
    <option id="3">3</option>
    <option id="4">4</option>
    <option selected="selected" id="other">other</option>
    </select>
    </div>

    It basically makes fields visible (not shown here) when selecting the "other" option. I know there is other ways to do this, but there are reasons why this code was picked.

    This is the code:

    <script src="jquery.js"></script>
    <script type="text/javascript">
    $(function(){
    if ( $('select option:selected') && $('select option:selected').attr('id') == "other" ){
    $('.andere').show();
    } else {
    $('.andere').hide();
    }

    $("select").change(function() {

    var selectedItem = $(this).find('option:selected').attr('id');
    if ( selectedItem == "other" ){
    $('.andere').show();
    } else {
    $('.andere').hide();
    }

    });

    });
    </script>


    it works absolutely fine. However, now I had to add a second drop-down list to the HTML and that brakes my code. I guess I have to change the javascrit that it refers to THIS specific drop-down list and not to the other one that is compeltely unrelated. How do I do that ?

    Thanks for your help

    Stephan

  2. #2
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    I think it's because you're not specifically using the ID of the select. You are just doing a generic SELECT, and the second SELECT is confusing the code. Use ID.

  3. #3
    Join Date
    Apr 2012
    Posts
    5
    Hi,

    yes, thats what I figured. I just don't know how to do that, can you give me an example ?

    Just to clarify: I have tried to address that specific SELECT, but I did nit find out how to do it. I do not have any experience with javascrift.

    Thanks

    Stephan
    Last edited by STEPHANKOENIG; 04-07-2012 at 09:57 PM.

  4. #4
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    It looks to me as if you jumped straight into jQuery, without learning JavaScript, first. I'm new to jQuery, myself.

    I'd do it without jQuery.

    HTML Code:
    <form name="formname" id="formname">
    <select name="nspreselect" onChange="showHide(this,'andere');">
    <option id="1">1</option>
    <option id="2">2</option>
    <option id="3">3</option>
    <option id="4">4</option>
    <option selected="selected" id="other">other</option>
    </select><div id="andere">BLAH 1</div><br />
    <select name="secondSelect" onChange="showHide(this,'andere2');">
    <option id="1">1</option>
    <option id="2">2</option>
    <option id="3">3</option>
    <option id="4">4</option>
    <option selected="selected" id="other">other</option>
    </select><div id="andere2">BLAH 1</div>
    </form>
    Code:
    function showHide(sel,divName) {
          if(sel.value == "other") {
            document.getElementById(divName).style.visibility = "hidden";
            }
          else {
            document.getElementById(divName).style.visibility = "visible";
            }
    }
    window.onload = function(){
    	var nspreselect = document.forms["formname"].nspreselect;
    	var secondSelect = document.forms["formname"].secondSelect;
    	showHide(nspreselect,'andere');
    	showHide(secondSelect,'andere2');
    };

  5. #5
    Join Date
    Apr 2012
    Posts
    5
    WolfShade,

    I really appricate your help !

    Somehow I do not get your code working, when I select something else than "other" the display does not hide.

  6. #6
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    Sorry.. think I got your request backwards. To make it so that the div appears only when "other" is selected, make the change below:
    Code:
    function showHide(sel,divName) {
          if(sel.value != "other") {
            document.getElementById(divName).style.visibility = "hidden";
            }
          else {
            document.getElementById(divName).style.visibility = "visible";
            }
    }
    window.onload = function(){
    	var nspreselect = document.forms["formname"].nspreselect;
    	var secondSelect = document.forms["formname"].secondSelect;
    	showHide(nspreselect,'andere');
    	showHide(secondSelect,'andere2');
    };

  7. #7
    Join Date
    Apr 2012
    Posts
    5
    WolfShade,

    I really do not want to stretch it too much. I really appreciate your help!

    I understand the change you made. However both versions of the code do not work for me. They stay at the visible or non-visible view when loaded and do never change no matter what I select.

    I used your script and you html code.

    Stephan

  8. #8
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    both selected options have the same id

  9. #9
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>123</title>
    <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <style type="text/css">
    body{text-align:center;font-family:Verdana,Arial;font-size:11px;background-color:#fff;color:#000;padding:0px;margin:100px;}
    .andere{display:none;color:Crimson;background-color:#ccc;border:1px dashed #000;font-weight:bold;padding:50px;}
    </style>
    </head>
    <body>
    <form name="formname" id="formname">
    This select has the option with id='other'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<select name="nspreselect">
    <option id="1">1</option>
    <option id="2">2</option>
    <option id="3">3</option>
    <option id="4">4</option>
    <option selected="selected" id="other">other</option>
    </select>
    <br /><br />
    <div class="andere">div class="andere"</div>
    <br /><br />
    This select has no such options&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<select name="secondSelect">
    <option id="1">1</option>
    <option id="2">2</option>
    <option id="3">3</option>
    <option id="4">4</option>
    <option selected="selected" id="other2">other</option>
    </select>
    <br /><br />
    <div class="andere">div class="andere"</div>
    </form>
    <script type="text/javascript">
    $(function(){
    if($('select[name=nspreselect] option:selected') && $('select[name=nspreselect] option:selected').attr('id') == "other"){$('.andere').show();}
    else{$('.andere').hide();}
    
    $("select[name=nspreselect]").change(function(){
    var selectedItem = $(this).find('option:selected').attr('id');
    if(selectedItem == "other"){$('.andere').show();}
    else{$('.andere').hide();}
    });
    });
     </script>
    </body>
    </html>
    Last edited by Padonak; 04-09-2012 at 04:13 PM.

  10. #10
    Join Date
    Apr 2012
    Posts
    5
    select[name=nspreselect]

    GREAT !!!

    That works !

    Thank you so much !

  11. #11
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    good to hear ))

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles