AJAX

DOM select HTML

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Jul 2008

Posts: 11

Reputation: zappan is an unknown quantity at this point

Solved Threads: 0

zappan

Offline

Newbie Poster

DOM select HTML

Aug 6th, 2008

Hi everyone,

I've an issue here. i want load the data from database and i want it appear at DOM select. what i had done,first i load data to hidden text and use a javascript load to DOM select. But the problem is i need to click on select textbox first before the data is appear and also other problem i can't select other option.here is my code.

PHP code.

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<head><script type='text/javascript' src='script.js'></script></head>
<body>
<tr>
<td>
<input type='hidden' id='hiddenState' value='$custState' size='28'></td></tr>
 
<tr>
<td>
<select id='state' onClick='return retrieveOption();'>
<option value='apple'>Apple</option>
<option value='banana'>Banana</option>
<option value='car'>car</option>
<option value='mouse'>mouse</option>
</td>
</tr>
</body>
<head><script type='text/javascript' src='script.js'></script></head>
<body>
<tr>
<td>
<input type='hidden' id='hiddenState' value='$custState' size='28'></td></tr>

<tr>
<td>
<select id='state' onClick='return retrieveOption();'>
<option value='apple'>Apple</option>
<option value='banana'>Banana</option>
<option value='car'>car</option>
<option value='mouse'>mouse</option>
</td>
</tr>
</body>

/#############################################

javascript code.

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
function retrieveOption(){
	  var var_State=document.getElementById("hiddenState").value;
	  var var_Option=document.getElementById("state");
 
	  for(var i=0;i<var_Option.length;i++){
	    if (var_Option[i].value==var_State)
	    {
			var var_Text=var_Option[i].text;
			var_Option[i].selected=true;
 
	    }
	  }
	}
function retrieveOption(){
	  var var_State=document.getElementById("hiddenState").value;
	  var var_Option=document.getElementById("state");

	  for(var i=0;i<var_Option.length;i++){
	    if (var_Option[i].value==var_State)
	    {
			var var_Text=var_Option[i].text;
			var_Option[i].selected=true;
			
	    }
	  }
	}

thank you.

Last edited by digital-ether; Aug 6th, 2008 at 7:20 am. Reason: Please wrap your code in [code] ... [/code] tags

•

Join Date: Jul 2008

Posts: 11

Reputation: zappan is an unknown quantity at this point

Solved Threads: 0

zappan

Offline

Newbie Poster

Re: DOM select HTML

Aug 6th, 2008

Please someone help me....

•

Join Date: Aug 2008

Posts: 381

Reputation: langsor is an unknown quantity at this point

Solved Threads: 33

langsor

Offline

Posting Whiz

Re: DOM select HTML

Aug 6th, 2008

Let me get this straight, you want to update the values of your <select><options> using values you retrieve from a database -- based on what option your user selects from that <select> field initially? Is that correct?

If so, you might expand upon this code snippet to change the values of your select menu.
If you have the same number of new options as the original then it's easy, if you need to add or remove options depending on the results you get back you can also do that with DOM methods, or you can construct an entire new <select> input element with the new options and swap out the old with the new using either DOM methods or innerHTML method.

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
function retrieveOption () {
  var state = document.getElementById('state');
  for ( var i = 0; i < state.length; i ++ ) {
    if ( state[i].selected ) {
      // grab the new values here
      // example of updating one <option> value
      state[i].value = 'pizza';
      state[i].firstChild.nodeValue = 'Pizza';
    }
  }
}
function retrieveOption () {
  var state = document.getElementById('state');
  for ( var i = 0; i < state.length; i ++ ) {
    if ( state[i].selected ) {
      // grab the new values here
      // example of updating one <option> value
      state[i].value = 'pizza';
      state[i].firstChild.nodeValue = 'Pizza';
    }
  }
}