www.webdeveloper.com
Results 1 to 12 of 12

Thread: [RESOLVED] How to add a selected option to a drop down menu

  1. #1
    Join Date
    Apr 2006
    Posts
    219

    resolved [RESOLVED] How to add a selected option to a drop down menu

    Hello everybody,

    I have a javascript adding new options to a drop down select menu getting the information from the database. The code is as written below:
    Code:
    function setOptions1() {
    var selbox2 = document.egitimgiris.alttipID;
    selbox2.options.length = 0;
    selbox2.options[selbox2.options.length] = new Option('Option1','22')
    selbox2.options[selbox2.options.length] = new Option('Option2','23')
    selbox2.options[selbox2.options.length] = new Option('Option3','24')
    selbox2.options[selbox2.options.length] = new Option('Option4','25')
    }
    I want one of them to be added as selected. I will put an "if" check and if it the value of the option and the value in the database is equal I want that option to be added as "selected".

    Is this possible? If yes, how? Please help.

    Thanks and regards
    telmessos

  2. #2
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    i would prefer a loop, but here's a simple way to do what you ask:

    Code:
    function setOptions1(match) {
      var selbox2 = document.egitimgiris.alttipID, X;
       selbox2.options.length = 0;
       selbox2.options[selbox2.options.length] = X=new Option('Option1','22')
        if(match==X.value){X.selected=true;}
       selbox2.options[selbox2.options.length] = X=new Option('Option2','23')
        if(match==X.value){X.selected=true;}
       selbox2.options[selbox2.options.length] = X=new Option('Option3','24')
        if(match==X.value){X.selected=true;}
       selbox2.options[selbox2.options.length] = X=new Option('Option4','25')
        if(match==X.value){X.selected=true;}
    }

  3. #3
    Join Date
    Apr 2006
    Posts
    219
    Hi again,

    Thanks for the information but I think I could not explain my problem. That options are also created with a PHP code and loop. Independently from Javascript variables etc., I will check if two database query values are equal. If yes, I want to write new option as selected. Otherwise keep going like

    selbox2.options[selbox2.options.length] = new Option('Option1','22')

    Is there a function like
    selbox2.options[selbox2.options.length] = new Option('Option1','22','selected')??

    Thanks
    telmessos

  4. #4
    Join Date
    Feb 2010
    Location
    Amsterdam
    Posts
    174
    hey,

    you can do that if you override the Option function

    Code:
    <select id="sel1"></select>
    <script type="text/javascript">
    function Option(txt, val, sel){
     var o = document.createElement('option');
     o.appendChild(document.createTextNode(txt));
     o.value = val;
     if(sel){
      o.setAttribute('selected', 'selected');
     }
     return o;
    }
    var sel = document.getElementById('sel1');
    sel.appendChild(new Option('a', 'aaa'));
    sel.appendChild(new Option('b', 'aaa', false));
    sel.appendChild(new Option('c', 'aaa', true));
    sel.appendChild(new Option('d', 'aaa', false));
    sel.appendChild(new Option('e', 'aaa'));
    </script>
    tried this in ie6 and ff

  5. #5
    Join Date
    Apr 2006
    Posts
    219
    Thanks Gozzy,

    I found another solution with the help of a friend. I will write that one also.

    Code:
    var dbvalue = "25";  // or whatever
    for (var i =0; i <selbox2.options.length; i++) {
    if (selbox2[i].value == dbvalue) {
    selbox2.options[i].selected = true;
    }
    }
    This code updates the selected part of the option.

    Thanks anyway
    telmessos

  6. #6
    Join Date
    Mar 2010
    Location
    USA, KY
    Posts
    10

    Examples - take it from here

    Well, trying to figure out what you are doing. But PHP and JavaScript are 2 different beasts and have to be treated that way. For instance PHP does not have access to 'document.formName.fieldName.value' that is for javasciprt to parse. So in order to do the same thing in javascript and PHP you have to write it 2 different ways.

    JavaScript
    Code:
    function selectTheme(){
      $themeele = document.getElementById("theme");
      alert($themeele.options[$themeele.selectedIndex].value);  
    }
    function chooseTheme(){
      $e=document.getElementById("chooseTheme");
      $sel = document.createElement("select");
      $sele = $e.appendChild($sel);
      $sele.setAttribute("id","theme");
      $sele.setAttribute("onchange","selectTheme()");
      additem("name","Text");
      additem("orgnl","Original");
      additem("blue","The Blues");
    }
    function additem($val,$txt){
      $x = document.getElementById("theme");
      $opt = document.createElement("option");
      $opt.value = $val;
      $opt.text = $txt;
      $x.add($opt,null);
    }
    /* you must set a span in the html to "chooseTheme" to start */
    /* <span id="chooseTheme">&nbsp;</span> */
    this creates a select box then uses the additem() call to add options to the list.
    then to use javascript to kinda do what you are talking about you would have to run through the options.values to find it that value is eq to the other one then mark it selected something like this:
    Code:
    /* run through the options in the select box */
    for($x=0; $x <= document.f1.v1.options.length; $x++){
      /* if the text in the box matches the otherVal i pulled from the db earlier */
      if(documnet.f1.v1.options[$x].text == $otherVal){
        /* then make it marked */
        document.f1.v1.options[$x].selected = true;
      }
    }
    for javascript to work in this case you MUST pull the values out of the db before hand and you may want to stick them in hidden fields

    or the easy way in PHP
    PHP Code:
    <?php
    /* grab the values from the database */
    $id1 mysql_fetch_object(mysql_query("select username from user where uid = '$uid'"));
    $id2 mysql_fetch_object(mysql_query("select username from active where uid = '$uid'"));
    /* start the select box */
    echo('<select id="usernames">');
    /* run through the list */
    for($x=0$x<=$usernames$x++){
      echo(
    '<option');
      
    /* and if they are the same mark it */
      
    if($id1 == $id2){
        echo(
    ' selected');
      }
      echo(
    '>'.$id1.'</option>');
    }
    echo(
    '</select>');
    ?>
    my php is a little rusty so this code should NOT work as it is but comes very close

  7. #7
    Join Date
    Apr 2006
    Posts
    219
    Simply what I am doing is reading data from the database and create javascript according to the data. By doing that I can change the content of a sub-category drop down list without refreshing the page. The rest of the javascript code is refreshing the sub-category drop down content on change of category drop down list. This one is the default values to come to the page load on the edit section of the products. So when I click on "Edit" link a page comes with a selected category drop down + a selected sub-category dropdown. But when I change the category drop down value. The content of the sub-category drop down content changes without refreshing the page.

    So I don't try to make PHP and Javascript send variables to each other or communicate. What I am doing is writing the content of a javascript using a PHP loop

  8. #8
    Join Date
    Mar 2010
    Location
    USA, KY
    Posts
    10
    ok based on that then what you should try is something like this (borrowing from the above code)
    HTML Code:
    <?php
    /* grabs all TOP level categories */
    $cat = mysql_query("select name from category where parent = 1");
    /* grabs all cats that are really subcats */
    $subcat = mysql_query("select name from category where parent = 2");
    ?>
    <script type="text/javascript">
    .....
    function chooseTheme(){
      $e=document.getElementById("cat");
      $sel = document.createElement("select");
      $sele = $e.appendChild($sel);
      $sele.setAttribute("id","cat");
      $sele.setAttribute("onchange","selectTheme()");
      <?php
        /* going back to php */
        while ($row = db_fetch_object($subcat)){
          /* outputs javascript for each subcat */
          echo("additem\(\"$row->id\",\"$row->name\"\)\;");
        }
      ?>
    }
    
    .....
    </script>
    There are javascripts out there on the net which dynamically create one select based on another select so you should try to grab one of those then cut it with the php code base on the above
    But what this does is grabs all categories and categories that belong to another category then loops through them rendering the javascript "additem()" calls.

  9. #9
    Join Date
    Mar 2010
    Location
    USA, KY
    Posts
    10
    oh sry use "mysql" where ever you see something like "db_fetch_object"
    i always use the "db_" prefix then load in a script that translates that to whatever database you use.

  10. #10
    Join Date
    Mar 2010
    Location
    USA, KY
    Posts
    10
    check out http://dcs777.homeip.net/sites/defau...ryChooser.html for a script that came from javascript.com for examples on how to update one select based on the other

  11. #11
    Join Date
    Mar 2010
    Location
    USA, KY
    Posts
    10
    sry that script came from http://javascriptsource.com/ gotta give credit where credit is due

  12. #12
    Join Date
    Apr 2006
    Posts
    219
    dewcansam thanks for all entries but on one of my previous messages I explained that I found the solution. My code works perfectly. Thank you anyway

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