jQuery 세트 인덱스 선택

jQuery 세트 인덱스 선택

선택 상자가 있습니다.

<select id="selectBox">
  <option value="0">Number 0</option>
  <option value="1">Number 1</option>
  <option value="2">Number 2</option>
  <option value="3">Number 3</option>
  <option value="4">Number 4</option>
  <option value="5">Number 5</option>
  <option value="6">Number 6</option>
  <option value="7">Number 7</option>
</select>

선택한 인덱스에 따라 옵션 중 하나를 "선택됨"으로 설정하려고 합니다.

예를 들어, "숫자 3"을 설정하려는 경우 다음과 같이 설정합니다.

$('#selectBox')[3].attr('selected', 'selected');

하지만 이것은 효과가 없습니다.jQuery를 사용하여 인덱스에 따라 옵션을 선택한 상태로 설정하려면 어떻게 해야 합니까?

감사합니다!

참고: 답변은 jQuery 1.6.1+에 따라 다릅니다.

$('#selectBox :nth-child(4)').prop('selected', true); // To select via index
$('#selectBox option:eq(3)').prop('selected', true);  // To select via value

---

댓글 달아주셔서 감사합니다..getjQuery 요소가 아닌 DOM 요소를 반환하므로 작동하지 않습니다.다음 사항을 염두에 두십시오..eq원하는 경우 실렉터 외부에서도 기능을 사용할 수 있습니다.

$('#selectBox option').eq(3).prop('selected', true);

---

또한 특정 인덱스를 선택하는 대신 값을 사용하려는 경우 보다 간결하게 읽을 수 있습니다.

$("#selectBox").val("3");

참조: .val(3)이 예제에서도 사용할 수 있지만 숫자가 아닌 값은 문자열이어야 하므로 일관성을 위해 문자열을 선택했습니다.
(예:)<option value="hello">Number3</option>하려면 를 사용해야 ..val("hello"))

이것도 유용할 수 있으니 여기에 추가할까 생각했습니다.

항목의 인덱스가 아닌 항목의 값을 기준으로 값을 선택하려면 다음을 수행할 수 있습니다.

선택 목록:

<select id="selectBox">
    <option value="A">Number 0</option>
    <option value="B">Number 1</option>
    <option value="C">Number 2</option>
    <option value="D">Number 3</option>
    <option value="E">Number 4</option>
    <option value="F">Number 5</option>
    <option value="G">Number 6</option>
    <option value="H">Number 7</option>
</select>

질문:

$('#selectBox option[value=C]').attr('selected', 'selected');

$('#selectBox option[value=C]').prop('selected', true);

이제 선택한 항목이 "2번"이 됩니다.

대신 사용해 보십시오.

$("#selectBox").val(3);

훨씬 더 단순합니다.

$('#selectBox option')[3].selected = true;

# Set element with index
$("#select option:eq(2)").attr("selected", "selected");

# Set element by text
$("#select").val("option Text").attr("selected", "selected");

선택에 , 있다니수습할을세▁when다▁with있▁use를 사용하면 .
$('#select option').removeAttr('selected'); 선택합니다

# Set element by value
$("#select").val("2");

# Get selected text
$("#select").children("option:selected").text();  # use attr() for get attributes
$("#select option:selected").text(); # use attr() for get attributes 

# Get selected value
$("#select option:selected").val();
$("#select").children("option:selected").val();
$("#select option:selected").prevAll().size();
$("option:selected",this).val();

# Get selected index
$("#select option:selected").index();
$("#select option").index($("#select option:selected"));

# Select First Option
$("#select option:first");

# Select Last Item
$("#select option:last").remove();


# Replace item with new one
$("#select option:eq(1)").replaceWith("<option value='2'>new option</option>");

# Remove an item
$("#select option:eq(0)").remove();

해야 할 이해야할중것은한요해것은입니다.val()당분간select는 반환하지 . 요소의 수는 반환하지 않습니다.selectedIndex자바스크립트로

옵을선려면으로 value="7"간단히 사용할 수 있습니다.

$('#selectBox').val(7); //this will select the option with value 7.

이 옵션의 선택을 취소하려면 빈 배열을 사용합니다.

$('#selectBox').val([]); //this is the best way to deselect the options

물론 여러 옵션*을 선택할 수 있습니다.

$('#selectBox').val([1,4,7]); //will select options with values 1,4 and 7

, 개의 을 선택하기 는 *의, "" " "는",<select>요소에 다음이 있어야 합니다.MULTIPLE속성, 그렇지 않으면 작동하지 않습니다.

저는 항상 prop('선택됨')에 문제가 있었습니다. 다음은 항상 저에게 효과가 있었습니다.

//first remove the current value
$("#selectBox").children().removeAttr("selected");
$("#selectBox").children().eq(index).attr('selected', 'selected');

사용해 보십시오.

$('select#mySelect').prop('selectedIndex', optionIndex);

결국 .change 이벤트를 트리거합니다.

$('select#mySelect').prop('selectedIndex', optionIndex).change();

이것도 도움이 되길 바랍니다.

$('#selectBox option[value="3"]').attr('selected', true);

세 번째 옵션 선택

$('#selectBox').val($('#selectBox option').eq(2).val());

jsfiddle 예제

NB:

$('#selectBox option')[3].attr('selected', 'selected') 

잘못된 경우, 배열 차이는 jquery 개체가 아닌 dom 개체를 제공하므로, FF의 경우 함수가 아닌 "$('#selectBox 옵션')[3].attr()"인 경우 TypeError와 함께 실패합니다.

Marc와 John Kugelman의 답변을 명확히 하기 위해 다음을 사용할 수 있습니다.

$('#selectBox option').eq(3).attr('selected', 'selected')

get()jQuery 개체가 아닌 DOM 개체를 가져오기 때문에 지정된 방식으로 사용하면 작동하지 않으므로 다음 솔루션은 작동하지 않습니다.

$('#selectBox option').get(3).attr('selected', 'selected')

eq()지정된 인덱스를 가진 요소의 jQuery로 설정된 jQuery를 필터링합니다.보다 명확합니다.$($('#selectBox option').get(3))그렇게 효율적이지는 않습니다. $($('#selectBox option')[3])더 효율적입니다(테스트 사례 참조).

하지만 실제로 jQuery 객체는 필요하지 않습니다.이렇게 하면 효과가 있습니다.

$('#selectBox option')[3].selected = true;

http://api.jquery.com/get/

http://api.jquery.com/eq/

매우 중요한 또 다른 요점은 다음과 같습니다.

선택한 특성은 선택한 라디오 단추를 지정하는 방법이 아닙니다(적어도 Firefox 및 Chrome에서는).선택된 특성 사용:

$('#selectBox option')[3].checked = true;

확인란도 마찬가지입니다.

1.4.4에서 다음 오류가 발생합니다: $("#selectBox 옵션")[3].특성은 함수가 아닙니다.

은 다음과 같습니다.$('#name option:eq(idx)').attr('selected', true);

에▁where디#name 및 선택 ID 및idx선택하려는 옵션 값입니다.

선택한 순수 자바스크립트인덱스 속성은 순수한 자바스크립트이며 크로스 브라우저로 작동하기 때문에 올바른 방법입니다.

$('#selectBox')[0].selectedIndex=4;

다음은 두 개의 드롭다운이 하나를 사용하여 다른 하나를 설정하는 jsfiddle 데모입니다.

<select onchange="$('#selectBox')[0].selectedIndex=this.selectedIndex">
  <option>0</option>
  <option>1</option>
  <option>2</option>
</select>

<select id="selectBox">
  <option value="0">Number 0</option>
  <option value="1">Number 1</option>
  <option value="2">Number 2</option>
</select>

선택한 항목을 변경하기 전에 이 항목을 호출할 수도 있습니다.옵션 태그의 "선택된" 속성을 원하는 경우 색인화합니다(여기에 피들이 있습니다).

$('#selectBox option').removeAttr('selected')
   .eq(this.selectedIndex).attr('selected','selected');

저는 종종 트리거('변경')를 사용하여 작동합니다.

$('#selectBox option:eq(position_index)').prop('selected', true).trigger('change');

id select = select A1 및 position_index = 0(select의 첫 번째 옵션)의 예:

$('#selectA1 option:eq(0)').prop('selected', true).trigger('change');

//funcion para seleccionar por el text del select
var text = '';
var canal = ($("#name_canal").val()).split(' ');
$('#id_empresa option').each(function(i, option) {
        text = $('#id_empresa option:eq('+i+')').text();
        if(text.toLowerCase() == canal[0].toLowerCase()){
            $('#id_empresa option:eq('+i+')').attr('selected', true);
        }
    });

$('#selectBox option').get(3).attr('selected', 'selected')

위를 사용할 때 웹킷(크롬)에서 다음과 같은 오류가 계속 발생했습니다.

"Uncatched TypeError: 객체 #에 'attr' 메서드가 없습니다."

이 구문은 이러한 오류를 중지합니다.

$($('#selectBox  option').get(3)).attr('selected', 'selected');

다음을 수행하여 선택 목록의 값을 기준으로 항목을 선택합니다(특히 옵션 값에 공백이나 이상한 문자가 있는 경우).

$("#SelectList option").each(function () {
    if ($(this).val() == "1:00 PM")
        $(this).attr('selected', 'selected');
});

이 ( 드롭다운이 , ▁a▁▁do▁to▁also▁(▁dropdown다▁may다▁a▁you있니▁you습수▁if또-,▁have)▁multias한▁(select수▁a▁to를 할 수도 있습니다.break;따라서 첫 번째 값을 덮어쓰지 않습니다.

Js 파일에 하드 코딩된 값이 없는 솔루션이 필요합니다.selectedIndex지정된 솔루션 대부분이 브라우저 하나에 실패했습니다.FF10 및 IE8에서 작동하는 것으로 보입니다(다른 사용자가 다른 버전에서 테스트할 수 있습니까).

$("#selectBox").get(0).selectedIndex = 1; 

항목의 특정 속성을 기준으로 항목을 선택하려는 경우 [prop=val] 유형의 jQuery 옵션이 해당 항목을 가져옵니다.이제 나는 단지 그 물건의 가치로 원하는 색인은 신경 쓰지 않습니다.

$('#mySelect options[value=3]).attr('selected', 'selected');

저도 같은 문제에 직면했습니다.먼저 이벤트를 검토해야 합니다(즉, 어떤 이벤트가 먼저 발생하는지).

예:

첫 번째 이벤트는 옵션이 있는 선택 상자를 생성하는 것입니다.

두 번째 이벤트는 val() 등의 기능을 사용하여 기본 옵션을 선택하는 것입니다.

첫 번째 이벤트 이후에 두 번째 이벤트가 발생해야 합니다.

이를 위해 두 가지 기능을 사용하여 selectbox()를 생성하고 Default Option()을 선택합니다.

generateSelectbox()를 실행한 후에만 selectDefaultOption()을 호출해야 합니다.

선택 상자가 배수인 경우 여러 값을 초기화할 수도 있습니다.

$('#selectBox').val(['A', 'B', 'C']);

select option variable value를 동적으로 설정할 수 있으며 옵션이 선택됩니다.다음 코드를 시도할 수 있습니다.

코드:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

      $(function(){
            $('#allcheck').click(function(){
             // $('#select_option').val([1,2,5]);also can use multi selectbox
              // $('#select_option').val(1);
               var selectoption=3;
           $("#selectBox>option[value="+selectoption+"]").attr('selected', 'selected');
    });

});

HTML 코드:

   <select id="selectBox">
       <option value="0">Number 0</option>
       <option value="1">Number 1</option>
       <option value="2">Number 2</option>
       <option value="3">Number 3</option>
       <option value="4">Number 4</option>
       <option value="5">Number 5</option>
       <option value="6">Number 6</option>
       <option value="7">Number 7</option>
 </select> <br>
<strong>Select&nbsp;&nbsp; <a style="cursor:pointer;" id="allcheck">click for select option</a></strong>

너무 많은 시간을 소비한 후에, 이것은 저에게 효과가 있었습니다.

$("#selectbox")[0].selectedIndex = 1;

짧은 시간:

$("#selectBox").attr("selectedIndex",index)

여기서 index는 정수로 선택한 인덱스입니다.

언급URL : https://stackoverflow.com/questions/1280499/jquery-set-select-index