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

이번에는 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($("" + json[ind].typename + ""));
        }
      }
    });
  })

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

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

마우스 아웃 이벤트의 사례 및 자세한 설명
WebSocket 사용에 대한 자세한 설명
위 내용은 Jquery에서 선택 구성 요소를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!