>웹 프론트엔드 >JS 튜토리얼 >Jquery로 선택을 조작하는 방법

Jquery로 선택을 조작하는 방법

coldplay.xixi
coldplay.xixi원래의
2020-12-11 14:17:483494검색

jquery로 선택을 작동하는 방법: 1. 선택할 항목을 pxx로 설정합니다. 코드는 [$(".selector").val("pxx")]입니다. 2. 선택할 텍스트를 pxx로 설정합니다. 항목, 코드는 [ $(".selector").find("option[te].

Jquery로 선택을 조작하는 방법

이 튜토리얼의 운영 환경: windows7 시스템, jquery3.2.1 버전, thinkpad t480 컴퓨터.

관련 무료 학습 권장 사항: javascript 학습 튜토리얼, jQuery tutorial

jquery로 선택 작업 방법:

1 항목을 pxx로 설정하여 선택합니다.

$(".selector").val("pxx");

2. 텍스트가 있는 항목을 pxx로 설정하여 선택

$(".selector").find("option[text='pxx']").attr("selected",true);

대괄호 안의 등호 앞에는 따옴표 없이 속성 이름을 사용합니다. 괄호를 사용하면 논리가 매우 간단해집니다.

3. 현재 선택한 항목을 가져옵니다.

$(".selector").val();

4. 현재 선택한 항목의 텍스트를 가져옵니다.

$(".selector").find("option:selected").text();

여기서는 콜론을 사용하여 추론도 수행합니다.

연속적인 선택, 즉 두 번째 선택이 자주 사용됩니다. 이는 jquery에서 매우 간단합니다. Select로 선택한 텍스트 및 값:

구문 설명:

1. $("#select_id").change(function(){//code...}); //추가 항목 중 하나가 선택될 때 트리거되는 Select 이벤트

2. var checkText=$("#select_id").find("option:selected").text(); //Select

3. var checkValue=$("#select_id ").val() //Select

$("#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("650f3ac4d6536c49c688fd72cd0bb5f6Text4afa15d3069109ac30911f04c56f3338"); //为Select追加一个Option(下拉项)

2. $("#select_id").prepend("f4cdadfbd7f23eb7b8200f4ecc45411e请选择4afa15d3069109ac30911f04c56f3338"); //为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被选中项的值

$(".selector1").change(function(){
// 先清空第二个
$(".selector2").empty();
// 实际的应用中,这里的option一般都是用循环生成多个了
var option = $("<option>").val(1).text("pxx");
$(".selector2").append(option);
});

获 取select被选中项的文本

var item = $(&#39;input[name=items][checked]&#39;).val();

select下拉框的第二个元素为当前选中值

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

radio单选组的第二个元素为当前选中值

$(&#39;#select_id&#39;)[0].selectedIndex = 1;

获取值:

  • 文本框,文本区域:$("#txt").attr("value");

  • 多选框 checkbox:$("#checkbox_id").attr("value");

  • 单选组radio: $("input[type=radio][checked]").val();

  • 下拉框select: $('#sel').val();4에서 선택한 값을 가져옵니다. checkIndex=$("#select_id ").get(0).selectedIndex; //Get Select

  • 5. var maxIndex=$("#select_id option:last") .attr("index"); //Select

jQuery 설정의 최대 인덱스 값 가져오기 선택한 텍스트 및 값 선택:

구문 설명:

1 $("#select_id " ).get(0).selectedIndex=1; //Select index 값 1로 항목을 설정하여

2를 선택합니다. $("#select_id ").val(4); // 항목을 선택하려면 Select 값을 4로 설정하세요.

3. $("#select_id option[ text='jQuery']").attr("selected", true); //Select의 Text 값을 jQuery

jQuery에서 선택한 항목으로 설정하여 Select의 Option 항목을 추가/삭제합니다:

🎜Syntax 설명: 🎜🎜1. ("15ba1cdaec20352f688ebe8ab9039218Text4afa15d3069109ac30911f04c56f3338"); //옵션 추가(드롭다운 항목)🎜🎜2. $("#select_id"). prepend("b93adbf83522c105f4709f0807fe84ae선택하세요4afa15d3069109ac30911f04c56f3338"); //옵션 선택을 위해 삽입(첫 번째 위치)🎜🎜3. option:last").remove(); //Select에서 가장 큰 인덱스 값을 가진 Option(마지막 것)🎜🎜4을 삭제합니다. $("#select_id option[index='0' ]").remove(); //Select🎜🎜5에서 인덱스 값이 0인 옵션(첫 번째 옵션)을 삭제합니다. $("#select_id option[value='3']"). 제거(); //Select🎜🎜5에서 값이 '3'인 옵션을 삭제합니다. $("#select_id 옵션 [text='4']").remove(); code> //Select🎜🎜jquery radio value, checkbox value, select value, radio selected, checkbox selected , select selected 및 관련🎜🎜라디오 선택 항목 그룹의 값 가져오기에서 Text='4'인 옵션 삭제 🎜<pre class="brush:php;toolbar:false">$(&amp;#39;input[name=items]&amp;#39;).get(1).checked = true;</pre>🎜선택한 항목의 텍스트 가져오기🎜rrreee🎜선택 드롭다운 상자의 두 번째 요소는 현재 선택한 값입니다.🎜rrreee🎜radio 라디오 그룹 두 번째 요소는 현재 선택한 값입니다. 🎜rrreee🎜 값 가져오기: 🎜 <ul style="list-style-type: disc;"> <li>🎜텍스트 상자, 텍스트 영역: <code>$("#txt" ).attr("value");🎜🎜🎜다중 선택 상자 확인란: $("#checkbox_id").attr("value");🎜🎜
  • 🎜라디오 선택 그룹 라디오: $("input[type =radio][선택됨]").val();🎜🎜
  • 🎜드롭다운 상자 선택: $('# sel').val();🎜🎜 🎜🎜제어 양식 요소: 🎜🎜텍스트 상자, 텍스트 영역: $("#txt").attr("value",'');//콘텐츠 지우기 🎜🎜$("#txt").attr(" value",'11');//내용 채우기 🎜🎜다중 선택 상자 확인란: $("#chk1").attr("checked",''); //선택 취소🎜🎜$("#chk2"). attr("checked",true);//Check🎜🎜if($("#chk1").attr('checked')==undefine) //체크되었는지 판단🎜🎜라디오 그룹 라디오: $( "input[type=radio]").attr("checked",'2');//값=2인 항목을 현재 선택된 항목으로 설정🎜

    드롭다운 상자 선택: $("#sel").attr("value",'-sel3');//value=-sel3인 항목을 현재 선택한 항목으로 설정

    $("4df7baebda7388d5117b1b739df9017111114afa15d3069109ac30911f04c56f33382eae82d737bc394734fed6d77327bb5322224afa15d3069109ac30911f04c56f3338").appendTo("#sel")//드롭다운 상자 옵션 추가

    $("#sel").empty(); //드롭다운 상자 지우기

    프로그래밍 관련 지식을 더 보려면 프로그래밍 교육을 방문하세요. !

  • 위 내용은 Jquery로 선택을 조작하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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