선택 옵션 '선택됨'을 설정합니다(값 기준).

선택 옵션 '선택됨'을 설정합니다(값 기준).

나는 있습니다select필드에 몇 가지 옵션이 있습니다. 저는 그 .optionsj와 Query를 사용합니다.하지만 내가 오직 그것만 아는데 어떻게 그럴 수 있나요.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>

값이 있는 옵션을 선택해야 합니다.val2해야 합니까?이것이 어떻게 행해지는가?

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

옵션 태그를 입력할 필요가 없는 더 쉬운 방법이 있습니다.

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

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

참고: 위의 코드는 변경 이벤트를 트리거하지 않습니다.완전한 호환성을 얻으려면 다음과 같이 호출해야 합니다.

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

값이 '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>
</select>

값별 보류 중 상태로 설정:

$('#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);
    }
});

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

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

속성 선택기를 사용하여 모든 속성과 해당 값을 선택할 수 있습니다.[attributename=optionalvalue]이 경우 옵션을 선택하고 선택한 속성을 설정할 수 있습니다.

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

에▁where디value선택하려는 값입니다.

이전에 선택한 값을 제거해야 하는 경우, 이 값을 여러 번 사용하는 경우와 마찬가지로 먼저 선택한 속성을 제거하도록 약간 변경해야 합니다.

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

다른 방법으로 이를 수행할 수 있습니다(요소를 작동하려면 상위 요소를 ID 또는 클래스로 지정하는 것보다 ID 또는 클래스를 지정하는 것이 좋습니다).

여기서, div는 내부의 선택을 대상으로 하는 클래스를 가지고 있기 때문에, 코드는 다음과 같습니다.

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

또는

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

클래스가 자신을 선택하도록 지정된 경우 코드는 다음과 같습니다.

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

또는

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

또는

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

값을 동적으로 전달하기 위해 코드는 다음과 같습니다.

value="val2";

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

Ajax를 통해 요소가 추가되면 요소에 'id'를 지정하고 다음을 사용해야 합니다.

window.document.getElementById

그렇지 않으면 요소에 'class'를 부여하고 사용해야 합니다.

window.document.getElementById

인덱스 번호를 기준으로 선택한 요소의 값을 선택할 수도 있습니다.

선택 요소에 ID를 지정한 경우 코드는 다음과 같습니다.

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

위에서 설명한 대로 선택 값을 변경할 때 변경 방법이 호출되지 않습니다.

즉, 선택을 변경할 때 일부 작업을 수행하기 위해 코드를 작성한 경우 위의 방법은 선택 값을 변경하지만 변경을 트리거하지는 않습니다.

변경 기능을 트리거하려면 마지막에 .change()를 추가해야 합니다.

코드는 다음과 같습니다.

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

간단한 대답은 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% 효과가 있어요 제 작품에서 따온 것이기 때문에...:)

이것을 너무 많이 생각할 이유가 없습니다.당신이 하는 일은 단지 속성에 접근하고 설정하는 것뿐입니다.바로 그겁니다.

좋아요, 기본적인 DOM:

만약 당신이 이것을 스트레이트 자바스크립트로 하고 있다면, 당신은 다음과 같이 할 것입니다.

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

하지만 당신은 스트레이트 자바스크립트로 하는 것이 아니라 jQuery로 하는 것입니다.그리고 jQuery에서는 .prop() 함수를 사용하여 속성을 설정하려고 하므로 다음과 같이 합니다.

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

어쨌든, 당신의 아이디가 고유한지 확인하세요.그렇지 않으면, 당신은 왜 이것이 효과가 없었는지 궁금해 할 것입니다.

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

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');

출력: 이비인후과가 활성화됩니다.

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

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

---

이렇게 하면 코드가 사용자별 선택을 변경하는 것에 가까워집니다. 이 설명은 JS Fiddle에 포함되어 있습니다.

JS 피들

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

이것은 어디에서 잘 작동합니까?#graphtype선택 태그의 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>

사용:

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

이것은 나에게 효과가 있습니다.이 코드를 사용하여 고급 상자 업데이트 양식의 값을 구문 분석하고 있으며, 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));
}

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

.attr()이 이전 jQuery 버전에서 작동하지 않는 경우가 있지만 .prop():

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

여기에는 선택한 값을 변경할 수 있는 많은 솔루션이 있지만, OP와 약간 다른 도전이 있었기 때문에 저에게 맞는 솔루션은 없었습니다.이 값을 기준으로 다른 선택 드롭다운을 필터링해야 합니다.

은 대분의사자를 사용했습니다.$("div.id_100").val("val2").change();그들을 위해 그것을 작동시키기 위해.나는 이것을 약간 수정해야 했습니다.$("div#idOfDiv select").val("val2").trigger("change").

이것 또한 완전히 충분하지 않았고, 나는 또한 서류가 로딩되기를 기다려야 했습니다.내 전체 코드는 다음과 같습니다.

$(document).ready(function() {
    $("div#idOfDiv select").val("val2").trigger("change");
});

제게 도움이 됩니다.

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

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

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

여기 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');

이것을 사용하는 이유는 선택한 문을 크로스 브라우저가 지원하는 DOM으로 변경하고 변경을 트리거하여 잡을 수 있기 때문입니다.

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

이거 먹어봐요.

간단하면서도 효과적인 자바스크립트 + jQuery, 치명적인 조합입니다.

구성요소 선택:

<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;
});

또는 간단한 함수를 생성하여 줄을 그 안에 넣고 함수를 호출하여 옵션을 선택합니다.

jQuery + JavaScript를 혼합하면 마법이 수행됩니다.

값이 ID이고 텍스트가 코드일 때 마주친 문제입니다.코드를 사용하여 값을 설정할 수는 없지만 ID에 직접 액세스할 수는 없습니다.

var value;

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

//Do work here

정적 HTML 페이지가 아닌 동적으로 생성될 때 선택 드롭다운 컨트롤이 동적으로 변경되지 않는 문제가 있는 것 같습니다.

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

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

두 번째 줄이 없는 코드의 첫 번째 줄인 부록이 실제로 투명하게 작동한 것처럼, 인덱스를 설정한 후 선택한 인덱스를 검색하는 것이 올바르고 컨트롤을 실제로 클릭하면 올바른 항목이 표시되지만 컨트롤의 맨 위 레이블에는 이 항목이 반영되지 않았습니다.

바보의 대답 덕분에:

저의 경우, 저는 다음의 조합을 사용해야 했습니다.

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

$('.id_100').val("val1").change(); // I need to set the same value here for my next form submit.

다음 양식 제출에 대한 올바른 값을 설정합니다.이것을 사용할 때, 내가 다른 on change 이벤트를 경계로 설정하더라도, 무한 루프를 제공하지 않습니다.

옵션을 선택해야 하는데 두 옵션의 값이 같을 수 있습니다.
이는 순전히 시각적(프론트엔드) 차이를 위한 것이었습니다.
다음과 같은 옵션을 선택할 수 있습니다(2개의 값이 동일하더라도).

let options = $('#id_100 option')
options.prop('selected', false)   // Deselect all currently selected ones
let option = $(options[0])        // Select option from the list
option.prop('selected', true)
option.parent().change()          // Find the <select> element and call the change() event.

현재 선택한 모든 항목이 선택 취소됩니다.<option>요소들.첫 번째를 선택합니다(사용).options[0]) 및 업데이트<select>요소를 사용change사건의

불필요한 옵션을 모두 제거하고 선택한 옵션을 숨기는 작은 JQuery 확장을 준비했습니다. 사용자는 선택 필드에 하나의 값만 표시합니다.

$.prototype.makeReadOnly = function (canClick = false) {
    $(this).each(function () {
        $(this).readonly = true;
        if ($(this).is("select")) {
            if(!canClick) $(this).mousedown(function () { event.preventDefault(); }).keydown(function () { event.preventDefault(); });
            $(this).find('option:not(:selected)').remove();
            $(this).find('option').hide();
        }
    });
}

그런 다음 모든 선택 항목을 읽기 전용으로 설정할 수 있습니다.

$("select").makeReadOnly();

또는 특정 읽기 전용 클래스로만 선택합니다.

$("select.read-only").makeReadOnly();

언급URL : https://stackoverflow.com/questions/13343566/set-select-option-selected-by-value