웹 프론트엔드 JS 튜토리얼 JS, Jquery는 select, dropdownlist, checkbox 드롭다운 목록 상자(샘플 코드)_javascript 기술의 값을 가져옵니다.

JS, Jquery는 select, dropdownlist, checkbox 드롭다운 목록 상자(샘플 코드)_javascript 기술의 값을 가져옵니다.

May 16, 2016 pm 05:04 PM
dropdownlist select

jQuery获取Select选择的Text和Value:
语法解释:
1. $("#select_id").change(function(){//code...});   //为Select添加事件,当选择其中一项时触发
2. var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text
3. var checkValue=$("#select_id").val();  //获取Select选择的Value
4. var checkIndex=$("#select_id ").get(0).selectedIndex;  //获取Select选择的索引值
5. var maxIndex=$("#select_id option:last").attr("index");  //获取Select最大的索引值 

jQuery设置Select选择的Text和Value:
语法解释:
1. $("#select_id ").get(0).selectedIndex=1;  //设置Select索引值为1的项选中
2. $("#select_id ").val(4);   //设置Select的Value值为4的项选中
3. $("#select_id option[text='jQuery']").attr("selected", true);   //设置Select的Text值为jQuery的项选中

jQuery添加/删除Select的Option项:
语法解释:
1. $("#select_id").append("");  //为Select追加一个Option(下拉项)
2. $("#select_id").prepend("");  //为Select插入一个Option(第一个位置)
3. $("#select_id option:last").remove();  //删除Select中索引值最大Option(最后一个)
4. $("#select_id option[index='0']").remove();  //删除Select中索引值为0的Option(第一个)
5. $("#select_id option[value='3']").remove();  //删除Select中Value='3'的Option
5. $("#select_id option[text='4']").remove();  //删除Select中Text='4'的Option

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的项目为当前选中项 
                $("").appendTo("#sel")//添加下拉框的option 
                $("#sel").empty();//清空下拉框

-------------------------------------------------------------------

//遍历option和添加、移除option
function changeShipMethod(shipping){
var len = $("select[@name=ISHIPTYPE] option").length
if(shipping.value != "CA"){
$("select[@name=ISHIPTYPE] option").each(function(){
if($(this).val() == 111){
$(this).remove();
}
});
}else{
$("").appendTo($("select[@name=ISHIPTYPE]"));
}
}

//取得下拉選單的選取值

$(#testSelect option:selected').text();
或$("#testSelect").find('option:selected').text();
或$("#testSelect").val();
//////////////////////////////////////////////////////////////////

记性不好的可以收藏下:
1,下拉框:
 
var cc1 = $(".formc select[@name='country'] option[@selected]").text(); //得到下拉菜单的选中项的文本(注意中间有空格)
var cc2 = $('.formc select[@name="country"]').val(); //得到下拉菜单的选中项的值
var cc3 = $('.formc select[@name="country"]').attr("id"); //得到下拉菜单的选中项的ID属性值
$("#select").empty();//清空下拉框//$("#select").html('');
$("").appendTo("#select")//添加下拉框的option

稍微解释一下:
1.select[@name='country'] option[@selected] 表示具有name 属性,
并且该属性值为'country' 的select元素 里面的具有selected 属性的option 元素;
可以看出有@开头的就表示后面跟的是属性。

2,单选框:
$("input[@type=radio][@checked]").val(); //得到单选框的选中项的值(注意中间没有空格)
$("input[@type=radio][@value=2]").attr("checked",'checked'); //设置单选框value=2的为选中状态.(注意中间没有空格)

3,复选框:
$("input[@type=checkbox][@checked]").val(); //得到复选框的选中的第一项的值
$("input[@type=checkbox][@checked]").each(function(){ //由于复选框一般选中的是多个,所以可以循环输出
alert($(this).val());
});

$("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined){} //判断是否已经打勾

当然jquery的选择器是强大的. 还有很多方法.




aaass


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的项目为当前选中项
$("11112222").appendTo("#sel")//添加下拉框的option
$("#sel").empty();//清空下拉框

获取一组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_id" ).attr("value");
라디오 선택 그룹 라디오: $("input[@type=radio][@checked]").val()
드롭다운 상자 선택: $(' #sel').val()

제어 양식 요소:
텍스트 상자, 텍스트 영역: $("#txt").attr("value",'');//내용 지우기
$(" #txt").attr("value",'11');//내용 채우기
다중 선택 상자 확인란: $("#chk1").attr("checked",'');//하지 마세요 check Check
$("#chk2").attr("checked",true);//Tick
if($("#chk1").attr('checked')==undefine) // 체크 여부 확인
라디오 그룹 radio: $("input[@type=radio]").attr("checked",'2');//값=2인 항목을 현재 선택된 항목으로 설정 항목
드롭다운 상자 선택: $("#sel").attr("value",'-sel3');//value=-sel3인 항목을 현재 선택한 항목으로 설정
$( "").appendTo("#sel")//드롭 옵션을 추가합니다- 다운 상자
$("#sel ").empty();//드롭다운 상자 지우기

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Select Channels의 비동기 처리 방법 golang을 이용한 Go 동시 프로그래밍 Select Channels의 비동기 처리 방법 golang을 이용한 Go 동시 프로그래밍 Sep 28, 2023 pm 05:27 PM

golang을 사용한 SelectChannelsGo 동시 프로그래밍의 비동기 처리 방법 소개: 동시 프로그래밍은 현대 소프트웨어 개발에서 중요한 영역으로, 애플리케이션의 성능과 응답성을 효과적으로 향상시킬 수 있습니다. Go 언어에서는 채널 및 Select 문을 사용하여 동시 프로그래밍을 간단하고 효율적으로 구현할 수 있습니다. 이 기사에서는 SelectChannelsGo 동시 프로그래밍의 비동기 처리 방법에 golang을 사용하는 방법을 소개하고 구체적인 내용을 제공합니다.

jquery에서 선택 요소를 숨기는 방법 jquery에서 선택 요소를 숨기는 방법 Aug 15, 2023 pm 01:56 PM

jquery에서 선택 요소를 숨기는 방법: 1. hide() 메서드, HTML 페이지에 jQuery 라이브러리를 도입하고 다른 선택기를 사용하여 선택 요소를 숨길 수 있습니다. ID 선택기는 selectId를 선택한 선택 요소의 ID로 바꿉니다. 2. css() 메서드, ID 선택기를 사용하여 숨겨야 하는 선택 요소를 선택하고, css() 메서드를 사용하여 표시 속성을 없음으로 설정하고, selectId를 선택 요소의 ID로 바꿉니다.

jQuery에서 선택 요소의 변경 이벤트 바인딩을 구현하는 방법 jQuery에서 선택 요소의 변경 이벤트 바인딩을 구현하는 방법 Feb 23, 2024 pm 01:12 PM

jQuery는 DOM 조작, 이벤트 처리, 애니메이션 효과 등을 단순화하는 데 사용할 수 있는 인기 있는 JavaScript 라이브러리입니다. 웹 개발에서 우리는 선택 요소에 대한 이벤트 바인딩을 변경해야 하는 상황에 자주 직면합니다. 이 기사에서는 jQuery를 사용하여 선택 요소 변경 이벤트를 바인딩하는 방법을 소개하고 특정 코드 예제를 제공합니다. 먼저 라벨을 사용하여 옵션이 포함된 드롭다운 메뉴를 만들어야 합니다.

드롭다운 목록에서 데이터를 바인딩하는 방법 드롭다운 목록에서 데이터를 바인딩하는 방법 Jan 23, 2024 pm 04:34 PM

바인딩 방법: 1. DataSource 속성을 사용하여 데이터 바인딩: 데이터 소스를 DropDownList의 DataSource 속성으로 설정하고 DataBind() 메서드를 호출하여 데이터 바인딩 2. DataBind() 메서드를 사용하여 데이터 바인딩: DataBind를 직접 사용합니다. () 메서드 바인딩 3. SqlDataSource 컨트롤을 사용하여 데이터 바인딩 4. Entity Framework를 사용하여 데이터 바인딩

Linux에서 select를 사용하는 이유는 무엇입니까? Linux에서 select를 사용하는 이유는 무엇입니까? May 19, 2023 pm 03:07 PM

Select를 사용하면 개발자가 동시에 여러 파일 버퍼를 기다릴 수 있으므로 IO 대기 시간을 줄이고 프로세스의 IO 효율성을 향상시킬 수 있습니다. select() 함수는 프로그램이 여러 파일 설명자를 모니터링하고 하나 이상의 모니터링된 파일 설명자가 소위 "준비" 상태가 될 때까지 기다릴 수 있도록 하는 IO 다중화 기능입니다. 설명자는 더 이상 차단되지 않으며 읽기, 쓰기 가능 및 예외를 포함한 특정 유형의 IO 작업에 사용될 수 있습니다. select는 헤더 파일 #include에 있는 컴퓨터 기능입니다. 이 함수는 파일 설명자 변경(읽기, 쓰기 또는 예외)을 모니터링하는 데 사용됩니다. 1.선택 기능 소개 선택 기능은 IO 다중화 기능입니다.

mysql의 선택 구문을 사용하는 방법 mysql의 선택 구문을 사용하는 방법 Jun 01, 2023 pm 07:37 PM

1. SQL 문의 키워드는 대소문자를 구분하지 않습니다. SELECT는 SELECT와 동일하고 FROM은 from과 동일합니다. 2. 사용자 테이블에서 모든 열을 선택하려면 * 기호를 사용하여 열 이름을 바꿀 수 있습니다. 구문--주석입니다. FEOM에 의해 지정된 [테이블]에서 [모든] 데이터를 쿼리합니다. *는 [모든 열]을 의미합니다. SELECT*FROM--FROM 데이터의 지정된 [테이블]에서 지정된 데이터를 쿼리합니다. 열 이름(필드) SELECT 열 이름 FROM 테이블 이름 인스턴스--참고: 여러 열을 구분하려면 영어 쉼표를 사용하십시오. selectusername, 비밀번호from

선택 채널 구현 golang을 통한 동시 프로그래밍 성능 최적화 선택 채널 구현 golang을 통한 동시 프로그래밍 성능 최적화 Sep 27, 2023 pm 01:09 PM

golang을 통해 SelectChannels 구현 Go 동시 프로그래밍의 성능 최적화 Go 언어에서는 동시 프로그래밍을 구현하기 위해 goroutine과 채널을 사용하는 것이 매우 일반적입니다. 여러 채널을 처리할 때 일반적으로 다중화를 위해 select 문을 사용합니다. 그러나 대규모 동시성의 경우 select 문을 사용하면 성능 저하가 발생할 수 있습니다. 이 기사에서는 golang을 통한 select의 일부 구현을 소개합니다.

드롭다운 목록을 사용하는 방법 드롭다운 목록을 사용하는 방법 Dec 12, 2023 pm 02:41 PM

프런트엔드 개발에서 Dropdownlist는 옵션 세트를 표시하고 사용자가 옵션 중에서 하나를 선택할 수 있도록 하는 데 자주 사용됩니다. HTML 부분은 세 가지 옵션이 포함된 Dropdownlist를 정의합니다. JavaScript 부분에서는 Dropdownlist의 값을 가져오는 방법과 Dropdownlist의 변경 이벤트를 수신하는 방법을 보여줍니다. 또한 Dropdownlist의 사용법은 특정 프런트 엔드 프레임워크 또는 라이브러리에 따라 달라질 수 있습니다.

See all articles