通过JavaScript填充下拉框更改所选项目

Question

I populate a drop down box from an array that uses Javascript on the page load. But I am pulling data out of a database how would I change which one was selected? I would prefer not to have to use PHP to create the drop down boxes, as I have other non php things that use the javascript as well. What Can I do to get my Drop DownList populated from PHP?

You can see that it just calls the SelectdeptDropdown function.

<label for="collegedropdown">Collge</label>
<select name="collegedropdown" id="collegedropdown" onChange="SelectDeptDropdown();">
  <option selected="selected">Choose a college</option>
</select>
<br /> 
<label for="deptdropdown">Department</label>
<select name="deptdropdown" id="deptdropdown">
  <option selected="selected">Choose a department</option>
</select>

Javascript Code:

removeAllOptions(document.profilecreate.deptdropdown);
addOption(document.profilecreate.deptdropdown, "", "Choose One", "");

if(document.profilecreate.collegedropdown.value == 'MY CHOICE #1'){
//all options here
}
//repeat for other cases here

NOTE: removeAllOptions calls another function that simply clears the dropdown list. addOption calls a function that creates the option element.

Answer 1

basically you need to use an XHR Request . The XHR request will hit another end point of your php server which will return data for you to populate the dropwdown field and then you can use some smart javascript to insert into the dom.

Tne end point should ideally return a json data which will only be the dropdown values and you generate the markup on the client side this is ont compulsory but recommended.. read more abt XHR and json here .

Finally I would suggest you to use a library like jquery that gives you simple api for XHR requests and DOM manipulation using which you can get your job done quickly.