값으로 jQuery 선택 옵션 요소


89

스팬 요소로 래핑 된 선택 요소가 있습니다. 선택 ID는 사용할 수 없지만 스팬 ID는 사용할 수 있습니다. 입력이 선택 옵션의 값 중 하나 인 숫자 i 인 javascript / jquery 함수를 작성하려고합니다. 이 기능은 관련 옵션을 선택으로 전환합니다.

<span id="span_id">
    <select id="h273yrjdfhgsfyiruwyiywer" multiple="multiple">
        <option value="1">cleaning</option>
        <option value="2">food-2</option>
        <option value="3">toilet</option>
        <option value="4">baby</option>
        <option value="6">knick-knacks</option>
        <option value="9">junk-2</option>
        <option value="10">cosmetics</option>
    </select>
</span>

나는 다음과 같이 썼습니다 (이것은 완전히 작동하지 않기 때문에이 질문을 게시하는 이유입니다).

function select_option(i) {

    options = $('#span_id').children('select').children('option');
    //alert(options.length); //7
    //alert(options[0]); //[object HTMLOptionElement]
    //alert(options[0].val()); //not a jquery element
    //alert(options[0].value); //1

    //the following does not seem to work since the elements of options are DOM ones not jquery's
    option = options.find("[value='" + i + "']");
    //alert(option.attr("value")); //undefined
    option.attr('selected', 'selected');

}

감사!

답변:


149

다음은 명확한 선택기가있는 가장 간단한 솔루션입니다.

function select_option(i) {
  return $('span#span_id select option[value="' + i + '"]').html();
}

34

jQuery> 1.6.1에서는이 구문을 사용하는 것이 더 좋습니다.

$('#span_id select option[value="' + some_value + '"]').prop('selected', true);

29

옵션을 $ (option)으로 감싸면 원하는 방식으로 작동합니다. 다음을 수행하여 코드를 더 짧게 만들 수도 있습니다.

$('#span_id > select > option[value="input your i here"]').attr("selected", "selected")


6

다음과 같이 .val ()을 사용하여 값을 선택할 수 있습니다.

function select_option(i) {
    $("#span_id select").val(i);
}

다음은 jsfiddle입니다 : https://jsfiddle.net/tweissin/uscq42xh/8/


어떤 브라우저 / 플랫폼에서 작동하지 않았습니까? Mac / Chrome에서는 목록에서 항목을 성공적으로 선택하는데, 이것이 바로 원래 질문이었습니다.
tom

@ 라마 씨, 질문을 오해했을 수도 있습니다. @ 톰의 코드는 질문을 받았다 무엇 않습니다 값이 주어진 i, i 번째 선택 option의를 select. OP가 옵션을 필터링하지 않았습니다.
Paul

4

값을 얻으려면 다음을 사용하십시오.

<select id ="ari_select" onchange = "getvalue()">
<option value = "1"></option>
<option value = "2"></option>
<option value = "3"></option>
<option value = "4"></option>
</select>

<script>
function getvalue()
{
    alert($("#ari_select option:selected").val()); 
}
</script>

이것은 값을 가져올 것입니다


1
function select_option(index)
{
    var optwewant;
    for (opts in $('#span_id').children('select'))
    {
        if (opts.value() = index)
        {
            optwewant = opts;
            break;
        }
    }
    alert (optwewant);
}

감사합니다! jQuery의 내부 구현이 무엇인지 모르겠지만 다른 솔루션은 더 간단 해 보입니다.
황홀한

이미 jQuery를 가지고 있다면 더 쉽지만 순수한 js 방식을 알고 싶을 것이라고 생각했습니다.
호건

0
$("#h273yrjdfhgsfyiruwyiywer").children('[value="' + i + '"]').prop("selected", true);
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.