>  기사  >  웹 프론트엔드  >  JQuery는 선택 구성 요소의 선택된 값 방법을 선택합니다.

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

亚连
亚连원래의
2018-05-31 17:00:091723검색

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

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

선택 가져오기:

선택한 텍스트 가져오기:

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

선택한 값 가져오기:

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

선택한 인덱스 가져오기:

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

세트 SELECT:

Select 선택 인덱스 설정:

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

SELECT로 선택한 선택 값 설정:

Rreee

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

(“#ddlregtype “).attr(“value”,”normal“);(“#ddlregtype “).attr(“value”,”normal“);(“#ddlregtype “).val(“normal”); 
$(“#ddlregtype “).get(0).value = value;

옵션 항목 설정:

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=&#39;0&#39;]").remove();//删除索引值为0的option
$("#select_id option[value=&#39;3&#39;]").remove(); //删除值为3的option
$("#select_id option[text=&#39;4&#39;]").remove(); //删除text值为4的option

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

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

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

R
//获取所有属性值 var item = $("#select1").val();
$(function(){
 $(&#39;#select1&#39;).each( //获得select1的所有值
   function(){
    $(&#39;button&#39;).click(function(){
      alert($(&#39;#select2&#39;).val()); //获得select2中的select1值
    });
   });
})
</script>
E

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

옵션 1 옵션 2 옵션 3

옵션 5

옵션 6
옵션 7

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

<<왼쪽에 선택하여 삭제

<<왼쪽에 모두 삭제


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

$(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으로 문의하세요.