SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Evangelist Alluvian's Avatar
    Join Date
    Jan 2007
    Location
    Orlando, FL
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to select an option with javascrpt

    Two part question here, hopefully they are both tiny.

    Lets say I have something really simple like a text field and a select/option combobox.

    I want to change the combobox to 'other' anytime the text in the textbox changes.


    Code:
          	    <input size="10" type="text" id="itemtext">
    
                <select size="10" align="left" id="itemcombo" style="width:20em;">
                  <option value="0">Other</option>
                  <option value="1">abc</option>
                  <option value="2">def</option>
                  <option value="3">ghi</option>
                </select>
    for the next part, I also want the combobox to update the text field with the VISIBLE selection, but keep the VALUE as being the number (mysql unique key)
    I already made the combobox update the textfield with onchange="itemtext.value=this.value", but this changes the textbox to the value field. Is the visible text as easy to get at?

    Thank you, and sorry for the newbie questions.

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can use the onchange event of the text input too.

    You want the text property of the selected option.

    Remove the align attribute from the select element. It's not valid.

    Put this in a script element or external .js file.
    Code:
    window.onload = function() {
      if(!document.getElementById) return;
      document.getElementById('itemtext').onchange=function(){
        document.getElementById('itemcombo').options[0].selected=true;
      }
      document.getElementById('itemcombo').onchange=function(){
        var str = this.options[this.selectedIndex].text;
        document.getElementById('itemtext').value=str;
      }
    }
    It's best to avoid using inline event handlers. I suggest you read these:
    The Behavior Layer
    Separating behavior and structure
    Behavioral Separation
    Unobtrusive JavaScript
    DOM Scripting - Sample chapter: Best Practices
    Accessible DHTML
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Evangelist Alluvian's Avatar
    Join Date
    Jan 2007
    Location
    Orlando, FL
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    GREAT, thanks. The links will be a great help. Finding information on the web is EASY. Finding GOOD information on the web can be a pain. I learn a lot of bad habits from poor web tutorials.

    Reading your text closely it looks a lot like the handlers for flash actionscripting which I used to be pretty good at. Same as putting all your script in the action layer vs sticking it in individual objects all over the movie file. Helps with readability, portability, and bug testing.


Bookmarks

Posting Permissions

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