導航:首頁 > 編程語言 > js更改select選項

js更改select選項

發布時間:2021-02-14 03:10:29

js如何通過select下拉列表來修改表中的數據

<body>
<select onchange="cha(this)">
<option value="">abc</option>
<option value="">efg</option>
<option value="">hij</option>
</select>
<span id="txt"></span>
</body>
<script type="text/javascript">
function cha(obj){
//獲取選中的option
var index = obj.selectedIndex;
//取選中的option的文本 是取值還是取屬性就隨意了
var val = obj.options[index].text;
//判斷val規則,可以用數組,也可以用if判斷 很靈活的一個位置
/*.......根據val的值判斷規則改變id為txt的值..........*/
//
var txt = document.getElementById('txt');
if(val == "efg"){
txt.innerHTML = "EFG";
}else if(val == "hij"){
txt.innerHTML = "HIJ";
}else{
txt.innerHTML = "";
}
}
</script>

Ⅱ js 怎麼動態設置 option 的selected 選項

通過for循環判斷每個選項,一旦滿足條件則設置其selected屬性為true即可,關鍵代碼

(2)js更改select選項擴展閱讀:

selected定義和用法

selected屬性規定在頁面載入時預先選定該選項。

被預選的選項會顯示在下拉列表最前面的位置。

也可以在頁面載入後通過 JavaScript 設置 selected 屬性。

Ⅲ 使用javascript如何改變select控制項的選中項

你好!!


可以通過設置value和selectedIndex來改變選中內項容:

varobj=document.getElementById('selTest');
obj.selectedIndex=0;//通過設置選中項索引
obj.value=0;//通過設置選中項的值

Ⅳ 怎麼通過javascript設置更改對應的option選項

加入乘客類型select的id是aa,證件類型的id是bb
window.onload = function() {
var aa = document.getElementById("aa");
var bb = document.getElementById("bb");
aa.onchange = function() {
var aaValue = "";
for(var i = 0; i < aa.options.length; i++) {
if(aa.options[i].selected == true) {
aaValue = aa.options[i].innerHTML;
}
}
if(aaValue == 'baby') {
for(var i = 0; i < bb.options.length; i++) {
if(bb.options[i].innerHTML == 'other') {
bb.options[i].selected = true;
}
}
}
}
}
運行測試通過

Ⅳ javascript動態控制select option 獲取value並刷新 改變selected

document.getElementByid('sel').onchange=function(){
document.getElementsByTagName('body')[0].style.fontSize=document.getElementByid('sel').value;
}
sel是select下拉列表的id,你這個option的值不對需要改下,改成存版在權的字體

Ⅵ 怎麼用js動態 設置select中的某個值為選中值

用JS動態設置select的方法如下:

手動通過原生JS來實現:

/**

* 設置select控制項選中

* @param selectId select的id值

* @param checkValue 選中option的值

*/

function set_select_checked(selectId, checkValue){

var select = document.getElementById(selectId);

for (var i = 0; i < select.options.length; i++){

if (select.options[i].value == checkValue){

select.options[i].selected = true;

break; } } }

然後通過這樣來調用:

// 設置select選中該班組

set_select_checked('edit-group', group_id);

注意:不要傳'#edit-group'。

(6)js更改select選項擴展閱讀

js動態設置Select中Option選中

/** *設置select選中

*@paramselectIdselect的id值

*@paramcheckValue選中option的值

*@authorlqy */

functionsetSelectChecked(selectId,checkValue){

varselect=document.getElementById(selectId);

for(vari=0;i<select.options.length;i++){

if(select.options[i].innerHTML==checkValue){

select.options[i].selected=true;

break; } } };

Ⅶ javascript動態 改變option的select屬性

http://lovexuwenhao.javaeye.com/blog/422017

關於 此控制項的所有操作~ 另寫了一個 例子專

請採納屬 謝謝.

Ⅷ 如何通過js動態設置select中option選中

<selectname="menu"id="menu">
<optionid="1">111</option>//111是顯示給用戶的信息
<optionid="2">222</option>
<optionid="3">333</option>
<optionid="4">444</option>
<optionid="5">555</option>
</select>
<scripttype="text/javascript">
functiondisplay(optionID){
varall_options=document.getElementById("menu").options;
for(i=0;i<all_options.length;i++){
if(all_options[i].id==optionID)//根據option標簽的ID來進行判斷測試的版代碼這里是兩權個等號
{
all_options[i].selected=true;
}
}
};
display("4");
</script>

Ⅸ 怎那樣用js實現點擊select下拉框中的選項更改頁面內容

給下拉菜單賦值的語句(有錯誤)
var Dept = mainPage.document.getElementsByName("Dept")[i-1];
for(var k=0;k<Dept.length;k++) {
if(Dept[k].value==trim(treatDetailRow.cells[2].innerHTML)) {
Dept[k].selected=true;
}
}
+++++++++++++++
下拉菜單
newCell=newRow.insertCell();
newCell.align="center";
newCell.className="row";
newCell.height="30px";
newCell.innerHTML=
"<select id='d' name='Dept' >"+
"<logic:present name='Dept' scope='request'>"+
"<logic:iterate id='d' name='Dept'>"+
"<option value='<bean:write name='d' property='deptCode'/>'>"+
"<bean:write name='d' property='deptName'/>"+
"</option>"+
"</logic:iterate>" +
"</logic:present>" +
"</select>"+
"<input type='hidden' name='deptName' />";var Dept = mainPage.document.getElementsByName("Dept")[i-1];
for(var k=0;k<Dept.length;k++) {
if(Dept[k].value==trim(本頁面下拉菜單的值 treatDetailRow.performedBy)) {
Dept[k].selected=true;
}
}

Ⅹ 中js想動態設置select選中的值怎麼弄

可以使用javascript和jQuery兩種實現方式
1:使用javascript實現
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>

<body>
<select name="jumpMenu" id="jumpMenu" onChange="jumpMenu('parent',this,0)">
<option id="1" value="跳轉URL">111</option> // 111 是顯示給用戶的信息
<option id="2" value="跳轉URL">222</option>
<option id="3" value="跳轉URL">333</option>
<option id="4" value="跳轉URL">444</option>
<option id="5" value="跳轉URL">555</option>
</select>
<script type="text/javascript">
function display(optionID){
var all_options = document.getElementById("jumpMenu").options;
for (i=0; i<all_options.length; i++){
if (all_options[i].id == optionID) // 根據option標簽的ID來進行判斷 測試的代碼這里是兩個等號
{
all_options[i].selected = true;
}
}
};
display("4");
</script>
</body>
</html>

2:使用jQuery實現
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>

<body>
<select name="jumpMenu" id="jumpMenu" >
<option value="1">111</option> // 111 是顯示給用戶的信息
<option value="2">222</option>
<option value="3">333</option>
<option value="4">444</option>
<option value="5">555</option>
</select>
<script type="text/javascript" src="js/jquery1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
// $("#jumpMenu").val(要選中的option的value值即可);
$("#jumpMenu").val(4);
});
</script>
</body>
</html>

閱讀全文

與js更改select選項相關的資料

熱點內容
網路中常用的傳輸介質 瀏覽:518
文件如何使用 瀏覽:322
同步推密碼找回 瀏覽:865
樂高怎麼才能用電腦編程序 瀏覽:65
本機qq文件為什麼找不到 瀏覽:264
安卓qq空間免升級 瀏覽:490
linux如何刪除模塊驅動程序 瀏覽:193
at89c51c程序 瀏覽:329
怎麼創建word大綱文件 瀏覽:622
裊裊朗誦文件生成器 瀏覽:626
1054件文件是多少gb 瀏覽:371
高州禁養區內能養豬多少頭的文件 瀏覽:927
win8ico文件 瀏覽:949
仁和數控怎麼編程 瀏覽:381
項目文件夾圖片 瀏覽:87
怎麼在東芝電視安裝app 瀏覽:954
plc顯示數字怎麼編程 瀏覽:439
如何辨別假網站 瀏覽:711
寬頻用別人的賬號密碼 瀏覽:556
新app如何佔有市場 瀏覽:42

友情鏈接