웹 프론트엔드 JS 튜토리얼 JQuery는 선택 구성 요소의 선택된 값 방법을 선택합니다.

JQuery는 선택 구성 요소의 선택된 값 방법을 선택합니다.

May 31, 2018 pm 05:00 PM
jquery select

이제 JQuery 선택 구성 요소의 선택 값 방법에 대한 기사를 공유하겠습니다. 좋은 참조 값이 있으며 모든 사람에게 도움이 되기를 바랍니다.

jquery는 select에서 선택한 텍스트와 값을 가져옵니다.

선택 가져오기:

선택한 텍스트 가져오기:

1

$(“#ddlregtype”).find(“option:selected”).text();

로그인 후 복사

선택한 값 가져오기:

1

$(“#ddlregtype “).val();

로그인 후 복사

선택한 인덱스 가져오기:

1

$(“#ddlregtype “).get(0).selectedindex;

로그인 후 복사
E

세트 SELECT:

Select 선택 인덱스 설정:

1

$(“#ddlregtype “).get(0).selectedindex=index;//index为索引值

로그인 후 복사

SELECT로 선택한 선택 값 설정:

Rreee

Select로 선택한 선택한 텍스트 설정:

1

2

(“#ddlregtype “).attr(“value”,”normal“);(“#ddlregtype “).attr(“value”,”normal“);(“#ddlregtype “).val(“normal”);

$(“#ddlregtype “).get(0).value = value;

로그인 후 복사

옵션 항목 설정:

1

2

3

4

5

6

7

8

9

var count=$("#ddlregtype option").length;

 for(var i=0;i<count;i++)

   {      if($("#ddlregtype ").get(0).options[i].text == text)

    {

      $("#ddlregtype ").get(0).options[i].selected = true;

      break;

    }

  }

$("#select_id option[text='jquery']").attr("selected", true);

로그인 후 복사

비어 있음 선택:

1

2

3

4

5

6

$("#select_id").append("<option value='value'>text</option>"); //添加一项option

$("#select_id").prepend("<option value='0'>请选择</option>"); //在前面插入一项option

$("#select_id option:last").remove(); //删除索引值最大的option

$("#select_id option[index='0']").remove();//删除索引值为0的option

$("#select_id option[value='3']").remove(); //删除值为3的option

$("#select_id option[text='4']").remove(); //删除text值为4的option

로그인 후 복사

작업은 두 가지 형태로 값을 얻어야 합니다. 그림에 표시된 대로:

왼쪽 선택 상자에서 오른쪽 선택 상자에 값을 추가하는 방법은 무엇입니까? 이를 얻기 위해 웹페이지 특수 효과를 사용할까도 생각했는데, 여기서는 더 많이 사용되는 jquery를 사용했습니다. :JS 코드는 다음과 같습니다: 代

1

$("#ddlregtype ").empty();

로그인 후 복사

R

1

2

3

4

5

6

7

8

9

10

//获取所有属性值 var item = $("#select1").val();

$(function(){

 $('#select1').each( //获得select1的所有值

   function(){

    $('button').click(function(){

      alert($('#select2').val()); //获得select2中的select1值

    });

   });

})

</script>

로그인 후 복사
E

HTML로 직접 작성할 수 없다는 점은 주목할 가치가 있습니다.

옵션 1 옵션 2 옵션 3

옵션 5

옵션 6
옵션 7

오른쪽에 선택하여 추가>>
오른쪽에 모두 추가>>

<<왼쪽에 선택하여 삭제

<<왼쪽에 모두 삭제


JQuery 및 Ajax를 사용하여 옵션을 선택하세요

1

2

3

4

5

6

7

8

$(function(){

 $(&#39;#select2&#39;).each( //获得select1的所有值,因为前面讲选项从左边添加到右边,jquery其实并没有真正将值从左边传到右边。

   function(){

    $(&#39;button&#39;).click(function(){

      alert($(this).val()); //获得select2中的select1值

    });

   });

})

로그인 후 복사

위 내용은 앞으로 모든 분들께 도움이 되길 바랍니다.

관련 기사:

vue.js 메소드로 배열 위치 이동과 동시에 뷰 업데이트

vue.js 또는 js 메소드로 중국어 A-Z 정렬 구현

실제 노드 정적에 대한 샘플 코드 파일 서버

위 내용은 JQuery는 선택 구성 요소의 선택된 값 방법을 선택합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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

핫툴 태그

메모장++7.3.1

메모장++7.3.1

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

SublimeText3 중국어 버전

SublimeText3 중국어 버전

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

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

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

jQuery 참조 방법에 대한 자세한 설명: 빠른 시작 가이드 jQuery 참조 방법에 대한 자세한 설명: 빠른 시작 가이드 Feb 27, 2024 pm 06:45 PM

jQuery 참조 방법에 대한 자세한 설명: 빠른 시작 가이드

jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까? jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까? Feb 28, 2024 pm 03:12 PM

jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까?

jQuery를 사용하여 요소의 높이 속성을 제거하는 방법은 무엇입니까? jQuery를 사용하여 요소의 높이 속성을 제거하는 방법은 무엇입니까? Feb 28, 2024 am 08:39 AM

jQuery를 사용하여 요소의 높이 속성을 제거하는 방법은 무엇입니까?

jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. Feb 28, 2024 pm 09:06 PM

jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요.

심층 분석: jQuery의 장점과 단점 심층 분석: jQuery의 장점과 단점 Feb 27, 2024 pm 05:18 PM

심층 분석: jQuery의 장점과 단점

jQuery를 사용하여 모든 태그의 텍스트 내용 수정 jQuery를 사용하여 모든 태그의 텍스트 내용 수정 Feb 28, 2024 pm 05:42 PM

jQuery를 사용하여 모든 태그의 텍스트 내용 수정

jQuery에서 eq의 역할 및 적용 시나리오 이해 jQuery에서 eq의 역할 및 적용 시나리오 이해 Feb 28, 2024 pm 01:15 PM

jQuery에서 eq의 역할 및 적용 시나리오 이해

PHP에서 일반적으로 사용되는 파일 작업 기능 요약 PHP에서 일반적으로 사용되는 파일 작업 기능 요약 Apr 03, 2024 pm 02:52 PM

PHP에서 일반적으로 사용되는 파일 작업 기능 요약

See all articles