點擊下拉內容js代碼,點擊下拉內容js代碼沒反應

本文目錄一覽：

• 1、如何用js取下拉框中的內容
• 2、用js怎樣獲得下拉框的值？
• 3、JS組件Bootstrap實現下拉菜單效果代碼
• 4、js怎麼添加一個下拉列表的值
• 5、誰內給我講一將如下 下拉菜單的js代碼
• 6、下拉菜單點擊實現連接跳轉功能的js代碼

如何用js取下拉框中的內容

jquery radio取值，checkbox取值，select取值，radio選中，checkbox選中，select選中，及其相關；

獲取一組radio被選中項的值

var item = $(‘input[@name=items][@checked]’).val();

獲取select被選中項的文本

var item = $(“select[@name=items] option[@selected]”).text();

select下拉框的第二個元素為當前選中值

$(‘#select_id’)[0].selectedIndex = 1;

radio單選組的第二個元素為當前選中值

$(‘input[@name=items]’).get(1).checked = true;

獲取值：

文本框，文本區域：$(“#txt”).attr(“value”)；

多選框checkbox：$(“#checkbox_id”).attr(“value”)；

單選組radio： $(“input[@type=radio][@checked]”).val();

下拉框select： $(‘#sel’).val();

控制表單元素：

文本框，文本區域：$(“#txt”).attr(“value”,”);//清空內容

$(“#txt”).attr(“value”,’11’);//填充內容

多選框checkbox： $(“#chk1”).attr(“checked”,”);//不打勾

$(“#chk2”).attr(“checked”,true);//打勾

if($(“#chk1”).attr(‘checked’)==undefined) //判斷是否已經打勾

單選組radio： $(“input[@type=radio]”).attr(“checked”,’2′);//設置value=2的項目為當前選中項

下拉框select： $(“#sel”).attr(“value”,’-sel3′);//設置value=-sel3的項目為當前選中項

$(“option value=’1’1111/optionoption value=’2’2222/option”).appendTo(“#sel”)//添加下拉框的option

$(“#sel”).empty()；//清空下拉框

用js怎樣獲得下拉框的值？

1、首先我們打開軟體進入代碼編輯按照圖示代碼先創建一個下拉框。

2、要運行後網頁界面如此顯示下拉框。

3、接下來我們按照圖示代碼用js來獲取被選中的值。

4、首先我們通過selectedIndex來獲得被選中的下標，再通過下標來獲得值。

5、當然，如果你是用jquery的話可以按照圖示代碼進行設置依然可以獲得下拉框的值。

JS組件Bootstrap實現下拉菜單效果代碼

Bootstrap

下拉菜單

這一章講解了下拉菜單，但是沒有涉及到交互部分，本章將具體講解下拉菜單的交互。使用下拉菜單（Dropdown）插件，您可以向任何組件（比如導航欄、標籤頁、膠囊式導航菜單、按鈕等）添加下拉菜單。

如果您想要單獨引用該插件的功能，那麼您需要引用

dropdown.js。或者，正如

Bootstrap

插件概覽

一章中所提到，您可以引用

bootstrap.js

或壓縮版的

bootstrap.min.js。

一、用法

您可以切換下拉菜單（Dropdown）插件的隱藏內容：

1、通過

data

屬性：向鏈接或按鈕添加

data-toggle=”dropdown”

來切換下拉菜單，如下所示：

div

class=”dropdown”

a

data-toggle=”dropdown”

href=”#”下拉菜單（Dropdown）觸發器/a

ul

class=”dropdown-menu”

role=”menu”

aria-labelledby=”dLabel”

…

/ul

/div

如果您需要保持鏈接完整（在瀏覽器不啟用

JavaScript

時有用），請使用

data-target

屬性代替

href=”#”：

div

class=”dropdown”

a

id=”dLabel”

role=”button”

data-toggle=”dropdown”

data-target=”#”

href=”/page.html”

下拉菜單（Dropdown）

span

class=”caret”/span

/a

ul

class=”dropdown-menu”

role=”menu”

aria-labelledby=”dLabel”

…

/ul

/div

2、通過

JavaScript：通過

JavaScript

調用下拉菜單切換，請使用下面的方法：

$(‘.dropdown-toggle’).dropdown()

二、下拉菜單簡單實例

常規使用中，和組件方法一樣，代碼如下：

//聲明式用法

div

class=”dropdown”

button

class=”btn

btn-primary”

data-toggle=”dropdown”

下拉菜單

span

class=”caret”/span

/button

ul

class=”dropdown-menu”

lia

href=”#”首頁/a/li

lia

href=”#”產品/a/li

lia

href=”#”資訊/a/li

lia

href=”#”關於/a/li

/ul

/div

聲明式用法的關鍵核心：

1.外圍容器使用

class=”dropdown”包裹；

2.內部點擊按鈕事件綁定

data-toggle=”dropdown”；

3.菜單元素使用

class=”dropdown-menu”。

//如果按鈕在容器外部，可以通過

data-target

進行綁定。

button

class=”btn

btn-primary”

id=”btn”

data-toggle=”dropdown”

data-target=”#dropdown”

在

JavaScript

調用中，沒有屬性，方法並不好用，下面介紹四個基本事件。

//下拉菜單方法，但仍然需要

data-*

$(‘#btn’).dropdown();

$(‘#btn’).dropdown(‘toggle’);

下拉菜單支持

4

種事件，分別對應彈出前、彈出後、關閉前和關閉後。

//事件，其他雷同

$(‘#dropdown’).on(‘show.bs.dropdown’,

function()

{

alert(‘在調用

show

方法時立即觸發！’);

});

三、在標籤頁內的下拉菜單的用法

!DOCTYPE

html

html

head

titleBootstrap

實例

–

帶有下拉菜單的標籤頁/title

link

href=”/bootstrap/css/bootstrap.min.css”

rel=”stylesheet”

script

src=”/scripts/jquery.min.js”/script

script

src=”/bootstrap/js/bootstrap.min.js”/script

/head

body

p帶有下拉菜單的標籤頁/p

ul

class=”nav

nav-tabs”

li

class=”active”a

href=”#”Home/a/li

lia

href=”#”SVN/a/li

lia

href=”#”iOS/a/li

lia

href=”#”VB.Net/a/li

li

class=”dropdown”

a

class=”dropdown-toggle”

data-toggle=”dropdown”

href=”#”

Java

span

class=”caret”/span

/a

ul

class=”dropdown-menu”

lia

href=”#”Swing/a/li

lia

href=”#”jMeter/a/li

lia

href=”#”EJB/a/li

li

class=”divider”/li

lia

href=”#”分離的鏈接/a/li

/ul

/li

lia

href=”#”PHP/a/li

/ul

/body

/html

效果圖：

以上就是本文的全部內容，希望對大家的學習有所幫助。

js怎麼添加一個下拉列表的值

javascript添加一個下拉列表項的方法：創建一個新的option節點，然後添加到目標select對象中去，關鍵代碼如下：

1、var objSelect = document.getElementById(select_id)。

2、var new_opt = new Option(objItemText, objItemValue)。

3、objSelect.options.add(new_opt)。

實例演示如下：

1、HTML結構，包括一個select項，含有三個options。另外，設置input和button,通過自由父子，實現給select增加自定義option。

此時的顯示效果如下，其中option中有三項。

2、JS的函數設計如下：

現有的options如下：

3、在頁面上輸入新的數據，點擊添加。

此時的select效果顯示如下，自由添加功能實現。

誰內給我講一將如下 下拉菜單的js代碼

第一， visibility：heddin；是讓子菜單初始化時隱藏。這樣下面的showmenu函數顯示時才有從無到有的效果。

第二 showmenu 是函數名字，可以自己命名，規則和變數名規則一樣

第三 觸發這個函數時 把子菜單的顯示屬性設置為顯示 如果是hidden 則隱藏。menu是子菜單對象 style是子菜單的樣式對象，也可以說是樣式屬性 visibility是設置網頁元素顯示與否的樣式屬性 這裡可以改成menu.style.display=””;

第四 document.onclick = hidmenu；是給網頁單擊事件指定處理函數

這是例子，如果是放到實際網頁里就不能這麼寫了

最好是給每個a標籤指定 onclick事件

像下邊一樣 a href=”javascript:showmenu()”下拉菜單/a

下拉菜單點擊實現連接跳轉功能的js代碼

1.js代碼

複製代碼

代碼如下:

!–

function

MM_jumpMenu(targ,selObj,restore){

eval(targ+”.location='”+selObj.options[selObj.selectedIndex].value+”‘”);

if

(restore)

selObj.selectedIndex=0;

}

—

2.使用

複製代碼

代碼如下:

p

class=”yq”校友會鏈接：/p

p

label

select

name=”select2″

onchange=”MM_jumpMenu(‘parent’,this,0)”

option

請選擇

/option

option

value=””

復旦大學校友網

/option

option

value=””

北京大學校友網

/option

option

value=””

清華大學校友網

/option

/select

/label/p