programing

텍스트로 옵션을 선택하려면 어떤 선택기가 필요합니까?

easyjava 2023. 9. 6. 23:07
반응형

텍스트로 옵션을 선택하려면 어떤 선택기가 필요합니까?

제가 확인해 봐야겠습니다.<select>텍스트가 특정 값과 같은 옵션이 있습니다.

예를 들면, 만약에.<option value="123">abc</option>, 저는 "abc"를 찾고 있습니다.

이것을 할 셀렉터가 있습니까?

나는 다음과 비슷한 것을 찾고 있습니다.$('#select option[value="123"]');하지만 본문을 위해서는.

이를 통해 다음과 같은 이점을(를)

$('#test').find('option[text="B"]').val();

데모 피들

이렇게 하면 텍스트 옵션이 제공됩니다.B그리고 다음을 포함하는 텍스트가 있는 것은 아닙니다.B.

jQuery의 최근 버전에서는 위의 내용이 작동하지 않습니다.아래 Quandary가 언급한 바와 같이 jQuery 1.9.1에서 작동하는 것은 다음과 같습니다.

$('#test option').filter(function () { return $(this).html() == "B"; }).val();

업데이트된 fiddle

선택기를 사용하여 특정 텍스트가 포함된 요소를 선택할 수 있습니다.
예를 들어,

$('#mySelect option:contains(abc)')

주어진 것을 확인하는 것.<select>요소에는 다음과 같은 옵션이 있습니다. 메소드를 사용합니다.

if (mySelect.has('option:contains(abc)').length)

모두 찾기<select>s에는 이러한 옵션이 포함되어 있으므로 다음 셀렉터를 사용합니다.

$('select:has(option:contains(abc))')

텍스트 상자의 값을 기반으로 목록의 선택된 인덱스를 설정하려고 하기 때문에 jQuery 1.7.2에서 이전 제안 중 어느 것도 효과가 없었고 일부 텍스트 값은 여러 옵션에 포함되어 있습니다.저는 결국 다음을 사용하게 되었습니다.

$('#mySelect option:contains(' + value + ')').each(function(){
    if ($(this).text() == value) {
        $(this).attr('selected', 'selected');
        return false;
    }
    return true;
});

아래와 같은 문제에 직면한 것은 작업 코드입니다.

$("#test option").filter(function() {
    return $(this).text() =='Ford';
}).prop("selected", true);

데모 : http://jsfiddle.net/YRBrp/83/

효과가 있었습니다.$("#test").find("option:contains('abc')");

드롭다운 목록에서 텍스트를 선택하는 데 가장 적합한 방법입니다.

$("#dropdownid option:contains(your selected text)").attr('selected', true);

파이어폭스와 IE 모두에서 작동할 수 있는 것을 얻을 때까지 이 중 몇 가지를 시도했습니다.이것이 제가 생각해낸 것입니다.

$("#my-Select").val($("#my-Select" + " option").filter(function() { return this.text == myText }).val());

보다 읽기 쉬운 방식으로 글을 쓰는 또 다른 방법:

var valofText = $("#my-Select" + " option").filter(function() {
    return this.text == myText
}).val();
$(ElementID).val(valofText);

의사 코드:

$("#my-Select").val( getValOfText( myText ) );

이 일은 나를 위한 것입니다.

$('#mySelect option:contains(' + value + ')').attr('selected', 'selected');

다음을 사용합니다.

$('#select option:contains(ABC)').val();

아래 jquery version 1.10.2가 잘 되었습니다.

  var selectedText="YourMatchText";
    $('#YourDropdownId option').map(function () {
       if ($(this).text() == selectedText) return this;
      }).attr('selected', 'selected');
    });

이것은 저에게 효과가 있습니다.

var result = $('#SubjectID option')
            .filter(function () 
             { return $(this).html() == "English"; }).val();

resultvariable은 일치하는 텍스트 값의 인덱스를 반환합니다.이제 색인을 사용하여 설정해 보겠습니다.

$('#SubjectID').val(result);

그건 10년 전의 일입니다.이제 jquery는 EOL이고, 우리는 이 간단한 일에 일반적인 DOM을 사용할 수 있습니다.

document.getElementById("SomeSelectId").querySelectorAll("option").forEach(o => o.selected = o.innerText == text);

2022년 8월 25일.

jQuery v3.5.1에서 실제로 작동한 것은 다음과 같습니다.

$('#selectID option:contains("label")').prop('selected', true);

변수에 텍스트가 있는 경우 다음 작업을 수행합니다.

  ddText = 'Text to find';
  $('#selectID option:contains("' + ddText + '")').prop('selected', true);

이는 jQuery 1.6(개방 브래킷 앞에 콜론이 표시됨)에서 작동하지만 최신 릴리스(당시 1.10)에서는 작동하지 않습니다.

$('#mySelect option:[text=abc]")

이것이 2022년 jquery V3.6.0에서 나에게 효과가 있었습니다.

$("#select >option").filter( function()
{
    if ($(this).text() === "123")
    {
        $(this).prop("selected", true);
    }
});

특성 대신 소품 사용

$('#mySelect option:contains(' + value + ')').each(function(){
    if ($(this).text() == value) {
        $(this).prop('selected', 'selected');
        return false;
    }
    return true;
});

이것도 효과가 있을 겁니다.

$('#test').find("select option:contains('B')".filter(":selected");

이 답변에서 설명한 대로 hasText에 대한 선택기를 쉽게 만들 수 있습니다.이를 통해 옵션을 찾을 수 있습니다.$('#test').find('option:hastText("B")').val();

추가한 hasText 메서드는 다음과 같습니다.

 if( ! $.expr[':']['hasText'] ) {
     $.expr[':']['hasText'] = function( node, index, props ) {
       var retVal = false;
       // Verify single text child node with matching text
       if( node.nodeType == 1 && node.childNodes.length == 1 ) {
         var childNode = node.childNodes[0];
         retVal = childNode.nodeType == 3 && childNode.nodeValue === props[3];
       }
       return retVal;
     };
  }

이거 나한테 효과가 있어요.

var options = $(dropdown).find('option');
var targetOption = $(options).filter(
function () { return $(this).html() == value; });

console.log($(targetOption).val());

글 올려주셔서 감사합니다.

옵션을 반복하거나 옵션의 다른 특성에 동일한 텍스트를 넣고 선택합니다.

언급URL : https://stackoverflow.com/questions/3744289/which-selector-do-i-need-to-select-an-option-by-its-text

반응형