> 웹 프론트엔드 > H5 튜토리얼 > Jquery에서 선택 구성 요소를 사용하는 방법

Jquery에서 선택 구성 요소를 사용하는 방법

php中世界最好的语言
풀어 주다: 2018-03-14 15:36:04
원래의
1976명이 탐색했습니다.

이번에는 jquery에서 select 컴포넌트를 사용하는 방법을 알려드리겠습니다. jquery에서 select 컴포넌트를 사용할 때 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

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

선택 가져오기:

선택한 텍스트 가져오기:

$(“#ddlregtype”).find(“option:selected”).text();
로그인 후 복사

선택한 값 가져오기:

$(“#ddlregtype “).val();
로그인 후 복사

선택한 인덱스 가져오기:

$(“#ddlregtype “).get(0).selectedindex;
로그인 후 복사
E

세트 SELECT:

선택한 인덱스 선택 설정:

$(“#ddlregtype “).get(0).selectedindex=index;//index为索引值
로그인 후 복사

선택한 값 설정:

(“#ddlregtype “).attr(“value”,”normal“);(“#ddlregtype “).attr(“value”,”normal“);(“#ddlregtype “).val(“normal”); 
$(“#ddlregtype “).get(0).value = value;
로그인 후 복사

SELECT에서 선택한 선택한 텍스트 설정:

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=&#39;jquery&#39;]").attr("selected", true);
로그인 후 복사

옵션 항목 설정:

$("#select_id").append("<option value=&#39;value&#39;>text</option>"); //添加一项option
$("#select_id").prepend("<option value=&#39;0&#39;>请选择</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
로그인 후 복사

비어 있는 선택:

$("#ddlregtype ").empty();
로그인 후 복사

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

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

//获取所有属性值 var item = $("#select1").val();
$(function(){
 $('#select1').each( //获得select1的所有值
   function(){
    $('button').click(function(){
      alert($('#select2').val()); //获得select2中的select1值
    });
   });
})
</script>
로그인 후 복사
R
$(function(){
 $('#select2').each( //获得select1的所有值,因为前面讲选项从左边添加到右边,jquery其实并没有真正将值从左边传到右边。
   function(){
    $('button').click(function(){
      alert($(this).val()); //获得select2中的select1值
    });
   });
})
로그인 후 복사
E

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

옵션 1 옵션 2 옵션 3

옵션 5

옵션 6
옵션 7

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

<<왼쪽에 선택하여 삭제

<<왼쪽에 모두 삭제


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

//绑定ClassLevel1单击事件
  $("#ClassLevel1").change(function () {
    var id = $("#ClassLevel1").val();
    var level2 = $("#ClassLevel2");
    level2.empty();
    $("#ClassLevel3").hide();
    $.ajax({
      url: "./askCommon.ashx?action=getclasslevel&pid=" + id,
      data: { "type": "ajax" },
      datatype: "json",
      type: "get",
      success: function (data) {
        var json = eval_r(data);
        for (var ind in json) {
          level2.append($(""));
        }
      }
    });
  })

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

jquery 캐리지 리턴 로그인 효과를 구현하는 방법

마우스 아웃 이벤트의 사례 및 자세한 설명

WebSocket 사용에 대한 자세한 설명

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿