jQuery-텍스트 설명을 통해 선택 컨트롤의 선택된 값 설정

선택 컨트롤이 있고 자바 스크립트 변수에는 텍스트 문자열이 있습니다.

jQuery를 사용하여 select 컨트롤의 선택된 요소를 내가 가진 텍스트 설명이있는 항목으로 설정하려고합니다 (내가없는 값과 반대).

나는 가치로 설정하는 것이 매우 사소한 것을 알고 있습니다. 예 :

$("#my-select").val(myVal);

그러나 나는 텍스트 설명을 통해 그것을하는 데 약간의 충격을 받았습니다. 나는 텍스트 설명에서 가치를 얻는 방법이 있어야한다고 생각하지만 내 두뇌는 너무 금요일 오후에 그것을 해결할 수 없습니다.

jQuery v1.6 +에 대한 설명으로 선택

var text1 = 'Two';
$("select option").filter(function() {
  //may want to use $.trim in here
  return $(this).text() == text1;
}).prop('selected', true);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select>
  <option value="0">One</option>
  <option value="1">Two</option>
</select>

1.6 이하 및 1.4 이상의 jQuery 버전

var text1 = 'Two';
$("select option").filter(function() {
  //may want to use $.trim in here
  return $(this).text() == text1;
}).attr('selected', true);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

<select>
  <option value="0">One</option>
  <option value="1">Two</option>
</select>

이 방법은 1.6보다 높지만 1.9보다 작은 버전에서는 작동하지만 1.6 이후에는 더 이상 사용되지 않습니다. 그것은 작동하지 않습니다 1.9+ jQuery를에.

이전 버전

val() 두 경우 모두 처리해야합니다.

$('select').val('1'); // selects "Two"
$('select').val('Two'); // also selects "Two"

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<select>
  <option value="0">One</option>
  <option value="1">Two</option>
</select>

나는 이것을 테스트하지 않았지만 이것은 당신을 위해 효과가있을 수 있습니다.

$("select#my-select option")
   .each(function() { this.selected = (this.text == myVal); });

이것을 시도하십시오 ... 텍스트 myText로 옵션을 선택하려면

$("#my-Select option[text=" + myText +"]").prop("selected", true);

이 방법으로 수행합니다 (jQuery 1.9.1)

$("#my-select").val("Dutch").change();

참고 : change ()를 잊지 마십시오. 그 때문에 오랫동안 검색해야했습니다 :)

$("#myselect option:contains('YourTextHere')").val();

텍스트 설명이 포함 된 첫 번째 옵션의 값을 반환합니다. 이것을 테스트하고 작동합니다.

모든 jQuery 버전의 합병증을 피하려면 솔직히 이러한 간단한 자바 스크립트 함수 중 하나를 사용하는 것이 좋습니다 ...

function setSelectByValue(eID,val)
{ //Loop through sequentially//
  var ele=document.getElementById(eID);
  for(var ii=0; ii<ele.length; ii++)
    if(ele.options[ii].value==val) { //Found!
      ele.options[ii].selected=true;
      return true;
    }
  return false;
}

function setSelectByText(eID,text)
{ //Loop through sequentially//
  var ele=document.getElementById(eID);
  for(var ii=0; ii<ele.length; ii++)
    if(ele.options[ii].text==text) { //Found!
      ele.options[ii].selected=true;
      return true;
    }
  return false;
}

나는 이것이 오래된 게시물이라는 것을 알고 있지만 jQuery 1.10.3과 위의 솔루션을 사용하여 텍스트로 선택할 수는 없습니다. 나는 다음 코드를 사용하여 끝났습니다 (스풀 슨 솔루션의 변형).

      var textToSelect = "Hello World";

      $("#myDropDown option").each(function (a, b) {
            if ($(this).html() == textToSelect ) $(this).attr("selected", "selected");
        });

그것이 누군가를 돕기를 바랍니다.

이 라인은 효과가있었습니다.

$("#myDropDown option:contains(myText)").attr('selected', true);

 $("#Test").find("option:contains('two')").each(function(){
     if( $(this).text() == 'two' ) {
        $(this).attr("selected","selected");
     }
 });

if 문은 "two"와 정확히 일치하고 "two three"는 일치하지 않습니다

1.7 이상에서 가장 쉬운 방법은 다음과 같습니다.

$("#myDropDown option:text=" + myText +"").attr("selected", "selected"); 

1.9+

$("#myDropDown option:text=" + myText +"").prop("selected", "selected"); 

테스트하고 작동합니다.

여기 아주 간단한 방법이 있습니다. PLZ는 그것을 사용

$("#free").val("y").change();

jquery selectedbox 플러그인을 살펴보십시오.

selectOptions(value[, clear]): 

문자열을 매개 변수 $("#myselect2").selectOptions("Value 1");또는 정규식 으로 사용하여 값을 기준으로 옵션을 선택하십시오 $("#myselect2").selectOptions(/^val/i);.

이미 선택된 옵션을 지울 수도 있습니다. $("#myselect2").selectOptions("Value 2", true);

부수적으로. 선택한 값이 설정되지 않았습니다. 그리고 나는 인터넷을 통해 검색했다. 실제로 웹 서비스에서 전화를 건 후 데이터를 가져 오기 때문에 값을 선택해야했습니다.

$("#SelectMonth option[value=" + DataFromWebService + "]").attr('selected', 'selected'); 
$("#SelectMonth").selectmenu('refresh', true);

그래서 선택기의 새로 고침은 내가 놓친 유일한 것입니다.

나는 attr당신이 원하지 않을 때 선택된 여러 옵션으로 끝나는 것을 발견했다 prop.

$("#myDropDown option:text=" + myText +"").prop("selected", "selected");

위의 예제에 문제가 있었고 문제는 선택 상자 값에 고정 길이 문자열 6 문자가 미리 채워져 있지만 전달되는 매개 변수가 고정 길이가 아니기 때문에 발생했습니다.

지정된 길이와 지정된 문자로 문자열을 오른쪽으로 채우는 rpad 함수가 있습니다. 따라서 매개 변수를 채우면 작동합니다.

$('#wsWorkCenter').val(rpad(wsWorkCenter, 6, ' '));


function rpad(pStr, pLen, pPadStr) {
if (pPadStr == '') {pPadStr == ' '};
while (pStr.length < pLen)
    pStr = pStr + pPadStr;
return pStr; 
} 

 $('#theYear').on('change', function () {
 FY = $(this).find('option:selected').text();
 $('#theFolders').each(function () {
     $('option:not(:contains(' + FY + '))', this).hide();
 });
 $('#theFolders').val(0);
});

$('#theYear').on('mousedown', function () {
 $('#theFolders option').show().find('option:contains("Select")', this).attr('selected', 'selected');
});

이 허용 된 대답은 정확하지 않은 것처럼 보이지만 .val ( 'newValue')은 함수에 정확하지만 이름으로 선택을 검색하려고하면 작동하지 않습니다 .ID와 클래스 이름을 사용하여 요소를 가져와야했습니다.

쉬운 옵션이 있습니다. 목록 옵션을 설정하고 텍스트를 선택한 값으로 설정하십시오.

$("#ddlScheduleFrequency option").selected(text("Select One..."));

선택 상자의 자식을 얻습니다. 그들을 통해 루프; 원하는 것을 찾으면 선택한 옵션으로 설정하십시오. 루핑을 중지하려면 false를 반환합니다.