Jquery Ajax does not refresh the select value code

Source: Internet
Author: User

Select can be used for multiple or single-choice drop-down box effects. If the Interaction Effect is met, we can call them one by one. Next I will introduce Jquery Ajax without refreshing the select value code, for more information, see.

Javascript *******/

T // call the prototype. js package here. $ ("aa") is equivalent to document. getElementById ("aa ");
 
// Js part. First, call the prototype ajax application.

The Code is as follows: Copy code
 
Function getSelectArr (id, type)
{
Var url = '/action. php'; // php page
Var pars = "type =" + type + "& amp; id =" + id; // concatenate Parameters
// Submit in post mode and execute the callback function 'createselect'
 
Var ajax = new Ajax. Request (url, {method: 'post', parameters: pars, onComplete: createSelecet });
}
 
Function createSelecet (info)
{
// Json string, ajax return value.
// Prototype die (json_encode (array ($ text, $ value), array ($ text2, $ value2 )));)
Var arr = eval (info. responseText );
// Create a select Element
Var select = document. createElement ("select ");
// Add attributes to select
Select. setAttribute ("name", "commu_album_id ");
For (var I = 0; I & lt; arr. length; I ++ ){
// Add option to select
Select. options. add (new Option (arr [I] [0], arr [I] [1]);
 
$ ("Target_commu_album_id"). innserHTML = "";
// Add select to a tag
$ ("Target_commu_album_id"). appendChild (select );
}

/************* Php *******/

The php part mainly receives the id and type

The Code is as follows: Copy code
T $ id = $ _ REQUEST ['id'];
 
$ Type = $ _ REQUEST ['type'];

Query the information to be displayed in the select box and put it in an array in order, such as array (option value, optionText. Then json is converted to json for output or placed in die (), and js can receive the output.

For example

The Code is as follows: Copy code
Tdie (
 
Json_encode (
 
Array (
 
Array (1, "Recruitment Department "),
 
Array (2, "Finance Department "),
 
Array (3, "Administrative Department "),
 
)));

Note: Only values are placed in the array. Do not add keys.

In the createSelect (info) of js

The Code is as follows: Copy code
Var arr = eval (info. responseText );

Arr is an array. arr [0] [0] = 1, arr [0] [1] = "admissions department ".

The Code is as follows: Copy code

Arr [1] [0] = 2, arr [1] [1] = "Finance Department"

Another way is to use the full js linkage menu effect if you frequently use the above problems.

Super simple js level-2 linkage menu

The Code is as follows: Copy code
<Script language = "javascript">
Subcat = new Array ();
Subcat [0] = new Array ("test store", "1", "1"); subcat [1] = new Array ("Jiangxi rongyu Pharmaceutical Group Co., Ltd ", "1", "2 ");
Var onecount = 2;
Function changelocation (locationid)
{
Document. registerform. cityareaid. length = 1;
Var locationid = locationid;
Var I;
Var nindex;
For (I = 0; I <onecount; I ++)
{
If (subcat [I] [1] = locationid)
{
Document. registerform. cityareaid. options [document. registerform. cityareaid. length] = new Option (subcat [I] [0], subcat [I] [2]);

}
}

}
Function doChange (objText, objDrop ){
If (! ObjDrop) return;
Var str = objText. value;
Var arr = str. split ("| ");
Var nIndex = objDrop. selectedIndex;
ObjDrop. length = 1;
For (var I = 0; I <arr. length; I ++ ){
ObjDrop. options [objDrop. length] = new Option (arr [I], arr [I]);
}
ObjDrop. selectedIndex = nIndex;
}
</Script>
<Form name = "registerform" id = "registerform" method = "POST" action = "">
<Select name = "cityid" id = "cityid" onblur = "changelocation (document. registerform. cityid. options [document. registerform. cityid. selectedIndex]. value)">
<Option value = ""> -- unlimited City -- </option>
<Option value = 1> test www. bKjia. c0m </option> </select>

<Select name = "cityareaid" id = "cityareaid">

<Option value = "0"> -- unlimited Regions -- </option>

</Select>
</Form>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.