선택 옵션 'selected'를 값으로 설정

select몇 가지 옵션 이있는 필드가 있습니다. 이제 optionsjQuery 를 사용하는 제품 중 하나를 선택해야합니다 . 하지만 어떻게 난 단지 것을 알 수 있습니까 때 value의 option선택해야합니다 것을?

다음 HTML이 있습니다.

<div class="id_100">
  <select>
    <option value="val1">Val 1</option>
    <option value="val2">Val 2</option>
    <option value="val3">Val 3</option>
  </select>
</div>

value 옵션을 선택해야합니다 val2. 이것을 어떻게 할 수 있습니까?

데모 페이지는 다음과 같습니다. http://jsfiddle.net/9Stxb/

옵션 태그를 사용하지 않아도되는 더 쉬운 방법이 있습니다.

$("div.id_100 select").val("val2");

이 jQuery 메소드를 확인하십시오 .

값이 'val2'인 옵션을 선택하려면 다음을 수행하십시오.

$('.id_100 option[value=val2]').attr('selected','selected');

change()값을 선택한 후 이벤트를 사용하십시오 . 문서에서 :

내용을 변경하지 않고 필드에서 포커스를 잃으면 이벤트가 트리거되지 않습니다. 이벤트를 수동으로 트리거하려면 .change()인수없이 적용하십시오 .

$("#select_id").val("val2").change();

자세한 내용은 .change ()에 있습니다.

먼저 모든 선택을 해제하고 선택 가능한 옵션을 필터링하십시오.

$('.id_100 option')
     .removeAttr('selected')
     .filter('[value=val1]')
         .attr('selected', true)

<select name="contribution_status_id" id="contribution_status_id" class="form-select">
    <option value="1">Completed</option>
    <option value="2">Pending</option>
    <option value="3">Cancelled</option>
    <option value="4">Failed</option>
    <option value="5">In Progress</option>
    <option value="6">Overdue</option>
    <option value="7">Refunded</option>

값으로 보류 상태로 설정

   $('#contribution_status_id').val("2");

나에게 다음은 일을했다.

$("div.id_100").val("val2").change();

가장 쉬운 방법은 val ()을 선택하는 것이라고 생각하지만 다음을 확인할 수 있습니다. jQuery에서 선택 및 옵션 태그를 처리하는 방법을 참조하십시오 . 옵션에 대한 자세한 내용은.

$('div.id_100  option[value="val2"]').prop("selected", true);

$('id_100').val('val2');

최적화되지는 않았지만 다음 로직도 일부 경우에 유용합니다.

$('.id_100 option').each(function() {
    if($(this).val() == 'val2') {
        $(this).prop("selected", true);
    }
});

속성 선택기를 사용하여 속성 및 해당 값을 [attributename=optionalvalue]선택할 수 있으므로 옵션을 선택하고 선택한 속성을 설정할 수 있습니다.

$("div.id_100 > select > option[value=" + value + "]").prop("selected",true);

value선택하려는 값은 어디에 있습니까 ?

이전에 선택한 값을 제거해야하는 경우,이 값을 여러 번 사용하는 경우처럼 선택한 속성을 먼저 제거하려면 값을 약간 변경해야합니다

$("div.id_100 option:selected").prop("selected",false);
$("div.id_100 option[value=" + value + "]")
        .prop("selected",true);

가장 좋은 방법은 다음과 같습니다.

$(`#YourSelect option[value='${YourValue}']`).prop('selected', true);

간단한 대답은 html입니다.

<select name="ukuran" id="idUkuran">
    <option value="1000">pilih ukuran</option>
    <option value="11">M</option>
    <option value="12">L</option>
    <option value="13">XL</option>
</select>

jquery에서 버튼 또는 무엇이든 아래 함수를 호출하십시오.

$('#idUkuran').val(11).change();

그것은 간단하고 100 % 작품, 내 작품에서 가져온 coz ... :) 도움을 바랍니다 ..

이것을 지나치게 생각할 이유가 없습니다. 당신이하는 일은 속성에 접근하고 설정하는 것입니다. 그게 다야.

자, 기본적인 dom : 만약 당신이 자바 스크립트로 이것을하고 있다면, 당신은 이것을 할 것입니다 :

window.document.getElementById('my_stuff').selectedIndex = 4;

그러나 당신은 직접적인 JavaScript로 그것을하지 않고, jQuery로 그것을하고 있습니다. 그리고 jQuery에서는 .prop () 함수를 사용하여 속성을 설정하려고하므로 다음과 같이하십시오.

$("#my_stuff").prop('selectedIndex', 4);

어쨌든 ID가 고유한지 확인하십시오. 그렇지 않으면 왜 이것이 작동하지 않는지 궁금해 벽에 머리를 두드리게됩니다.

가장 쉬운 방법은 다음과 같습니다.

HTML

<select name="dept">
   <option value="">Which department does this doctor belong to?</option>
   <option value="1">Orthopaedics</option>
   <option value="2">Pathology</option>
   <option value="3">ENT</option>
</select>

jQuery

$('select[name="dept"]').val('3');

출력 : ENT 를 활성화 합니다.

change()선택 값을 설정 한 후 사용하는 것이 좋습니다 .

$("div.id_100 select").val("val2").change();

이렇게하면 코드가 사용자가 선택을 변경하는 것에 가까워지며 설명은 JS Fiddle에 포함됩니다 .

JS 피들

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

이것은 #graphtypeselect 태그의 id가 잘 작동합니다 .

태그 선택 예 :

 <select name="site" id="site" class="form-control" onchange="getgraph1(this.options[this.selectedIndex].value);">
    <option value="" selected>Site</option> 
    <option value="sitea">SiteA</option>
    <option value="siteb">SiteB</option>
  </select>

var opt = new Option(name, id);
$("#selectboxName").append(opt);
opt.setAttribute("selected","selected");

사용하다:

$("div.id_100 > select > option[value=" + value + "]").attr("selected",true);

이것은 나를 위해 작동합니다. fancybox 업데이트 양식에서 값을 구문 분석하기 위해이 코드를 사용하고 있으며 app.js의 전체 소스는 다음과 같습니다.

jQuery(".fancybox-btn-upd").click(function(){
    var ebid = jQuery(this).val();

    jQuery.ajax({
        type: "POST",
        url: js_base_url+"manajemen_cms/get_ebook_data",
        data: {ebookid:ebid},
        success: function(transport){
            var re = jQuery.parseJSON(transport);
            jQuery("#upd-kategori option[value="+re['kategori']+"]").attr('selected',true);
            document.getElementById("upd-nama").setAttribute('value',re['judul']);
            document.getElementById("upd-penerbit").setAttribute('value',re['penerbit']);
            document.getElementById("upd-tahun").setAttribute('value',re['terbit']);
            document.getElementById("upd-halaman").setAttribute('value',re['halaman']);
            document.getElementById("upd-bahasa").setAttribute('value',re['bahasa']);

            var content = jQuery("#fancybox-form-upd").html();
            jQuery.fancybox({
                type: 'ajax',
                prevEffect: 'none',
                nextEffect: 'none',
                closeBtn: true,
                content: content,
                helpers: {
                    title: {
                        type: 'inside'
                    }
                }
            });
        }
    });
});

그리고 내 PHP 코드는 다음과 같습니다

function get_ebook_data()
{
    $ebkid = $this->input->post('ebookid');
    $rs = $this->mod_manajemen->get_ebook_detail($ebkid);
    $hasil['id'] = $ebkid;
    foreach ($rs as $row) {
        $hasil['judul'] = $row->ebook_judul;
        $hasil['kategori'] = $row->ebook_cat_id;
        $hasil['penerbit'] = $row->ebook_penerbit;
        $hasil['terbit'] = $row->ebook_terbit;
        $hasil['halaman'] = $row->ebook_halaman;
        $hasil['bahasa'] = $row->ebook_bahasa;
        $hasil['format'] = $row->ebook_format;
    }
    $this->output->set_output(json_encode($hasil));
}

이전 jQuery 버전에서는 .attr ()이 작동하지 않지만 .prop () 사용할 수 있습니다 .

$('select#ddlCountry option').each(function () {
    if ($(this).text().toLowerCase() == co.toLowerCase()) {
        $(this).prop('selected','selected');
        return;
    }
});

이것은 선택 컨트롤 에 확실히 작동 합니다 .

$('select#ddlCountry option').each(function () {
if ($(this).text().toLowerCase() == co.toLowerCase()) {
    this.selected = true;
    return;
} });

이 코드를 넣으십시오.

$("#Controls_ID").val(value);

소스 링크

DropDown에서 단일 및 다중 값 선택에 val () jQuery 메소드 사용

    $(function () {

        $("button").click(function () {
            $("#myDropDownSingle").val('5');
            $("#myDropDownMultiple").val(['5', '4', '8']);
        });

    });

HTML

<p>
    <h5>Single Selection</h5>
    <select id="myDropDownSingle" class="form-control">
        <option value="0">Select Value 0</option>
        <option value="8">Option value 8</option>
        <option value="5">Option value 5</option>
        <option value="4">Option value 4</option>
    </select>
</p>
<p>
    <h5>Multiple Selection</h5>
    <select id="myDropDownMultiple" class="form-control" multiple>
        <option value="0">Select Value 0</option>
        <option value="8">Option value 8</option>
        <option value="5">Option value 5</option>
        <option value="4">Option value 4</option>
    </select>
</p>

<p>
    <button>Get Value and Text on Button Click</button>
</p>

이 시도. 간단하지만 효과적인 자바 스크립트 + j 치명적인 콤보.

구성 요소 선택 :

<select id="YourSelectComponentID">
            <option value="0">Apple</option>
            <option value="2">Banana</option>
            <option value="3">Cat</option>
            <option value="4">Dolphin</option>
</select>

선택 :

document.getElementById("YourSelectComponentID").value = 4;

이제 옵션 4가 선택됩니다. 기본적으로 시작시 값을 선택하기 위해이를 수행 할 수 있습니다.

$(function(){
   document.getElementById("YourSelectComponentID").value = 4;
});

또는 간단한 함수를 만들어 그 안에 줄을 넣고 anyEvent에서 함수를 호출하여 옵션을 선택하십시오.

jQuery + javaScript의 혼합이 마술을 수행합니다 ....

오래된 게시물이지만 jQuery 플러그인처럼 작동하는 간단한 함수가 있습니다.

    $.fn.selectOption = function(val){
        this.val(val)
        .find('option')
        .removeAttr('selected')
        .parent()
        .find('option[value="'+ val +'"]')
        .attr('selected', 'selected')
        .parent()
        .trigger('change');

        return this;
    };

당신은 간단하게 다음과 같은 것을 할 수 있습니다 :

$('.id_100').selectOption('val2');

Reson이 이것을 사용하는 이유는 선택한 satemant를 DOM으로 변경하고 크로스 브라우저가 지원하는 것을 변경하고 변경 사항을 포착 할 수 있기 때문입니다.

기본적으로 인간 행동 시뮬레이션입니다.

• 동적으로 변경하려는 값을 염두에 두어야하며 HTML에서 정의한 옵션에있는 값과 동일해야합니다 case sensative. 다음과 같이 선택 상자를 동적으로 변경할 수 있습니다.

$("div#YOUR_ID").val(VALUE_CHANGED).change(); //value must present in options you selected otherwise it will not work

정적 HTML 페이지 대신 컨트롤을 동적으로 만들 때 선택 드롭 다운 컨트롤이 동적으로 변경되지 않는 문제가있는 것 같습니다.

jQuery 에서이 솔루션은 저에게 효과적이었습니다.

$('#editAddMake').val(result.data.make_id);
$('#editAddMake').selectmenu('refresh');

두 번째 줄이없는 첫 번째 코드 줄의 부록과 마찬가지로 실제로 인덱스에서 설정 한 후 선택한 인덱스를 검색하는 것이 정확했으며 실제로 컨트롤을 클릭하면 올바른 항목이 표시되지만 반영되지 않았다는 점에서 투명하게 작동했습니다. 컨트롤의 상단 라벨에

도움이 되었기를 바랍니다.

값이 ID이고 텍스트가 코드 인 경우 문제가 발생했습니다. 코드를 사용하여 값을 설정할 수는 없지만 ID에 직접 액세스 할 수는 없습니다.

var value;

$("#selectorId > option").each(function () {
  if ("SOMECODE" === $(this).text()) {
    value = $(this).val();
  }
});

//Do work here

그것은 나를 위해 작동

$("#id_100").val("val2");

이것은 잘 작동합니다

jQuery('.id_100').change(function(){ 
        var value = jQuery('.id_100').val(); //it gets you the value of selected option 
        console.log(value); // you can see your sected values in console, Eg 1,2,3
    });