jQuery - ustawianie wybranej wartości kontrolki wyboru za pomocą opisu tekstowego

Mam kontrolę wyboru, aw zmiennej javascript mam ciąg tekstowy.

Za pomocą jQuery chcę ustawić wybrany element formantu select jako element z opisem tekstowym, który mam (w przeciwieństwie do wartości, której nie mam).

Wiem, że ustawienie wartości jest dość proste. na przykład

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

Ale jestem trochę zakłopotany robieniem tego za pomocą opisu tekstowego. Wydaje mi się, że musi istnieć sposób na wydobycie wartości z opisu tekstowego, ale mój mózg jest zbyt piątek po południu, aby móc to wypracować.

Wybierz według opisu dla 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>

Wersje jQuery poniżej 1.6 i większe lub równe 1.4

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>

Zwróć uwagę, że chociaż to podejście będzie działać w wersjach powyżej 1.6, ale mniejszych niż 1.9, to jest ono przestarzałe od 1.6. Nie będzie działać w jQuery 1.9+.

Poprzednie wersje

val() powinien obsługiwać oba przypadki.

$('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>

Nie testowałem tego, ale to może działać dla ciebie.

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

Spróbuj tego ..., aby wybrać opcję z tekstem myText

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

Robię to w ten sposób (jQuery 1.9.1)

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

Uwaga: nie zapomnij o zmianie (), musiałem za długo szukać :)

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

zwróci wartość pierwszej opcji zawierającej opis tekstowy. Testowałem to i działa.

Aby uniknąć komplikacji wersji jQuery, szczerze polecam użycie jednej z tych naprawdę prostych funkcji javascript ...

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

Wiem, że to stary post, ale nie udało mi się go wybrać tekstem za pomocą jQuery 1.10.3 i powyższych rozwiązań. Skończyło się na użyciu następującego kodu (odmiana rozwiązania Spoulsona):

      var textToSelect = "Hello World";

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

Mam nadzieję, że to komuś pomoże.

Ta linia działała:

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

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

Instrukcja if pasuje dokładnie do „dwa” i „dwa trzy” nie zostanie dopasowana

Najłatwiejszym sposobem w wersji 1.7+ jest:

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

1.9+

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

Testowane i działa.

Oto bardzo prosty sposób. proszę użyć tego

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

spójrz na wtyczkę selectedbox jquery

selectOptions(value[, clear]): 

Wybierz opcje według wartości, używając łańcucha jako parametru $("#myselect2").selectOptions("Value 1");lub wyrażenia regularnego $("#myselect2").selectOptions(/^val/i);.

Możesz także wyczyścić już wybrane opcje: $("#myselect2").selectOptions("Value 2", true);

Tylko na marginesie. Moja wybrana wartość nie została ustawiona. I przeszukałem całą sieć. Właściwie musiałem wybrać wartość po oddzwonieniu z usługi internetowej, ponieważ otrzymywałem z niej dane.

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

Odświeżenie selektora było jedyną rzeczą, której mi brakowało.

Zauważyłem, że korzystając z attrniego skończysz z wieloma opcjami wybranymi, gdy nie chcesz - rozwiązaniem jest użycie prop:

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

Miałem problem z powyższymi przykładami, a problem był spowodowany faktem, że moje wartości pola wyboru są wypełnione ciągami o stałej długości 6 znaków, ale przekazywany parametr nie był stałej długości.

Mam funkcję rpad, która wyrówna ciąg znaków do określonej długości i określonego znaku. Po uzupełnieniu parametru działa.

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

Ta zaakceptowana odpowiedź nie wydaje się poprawna, podczas gdy .val ('newValue') jest poprawny dla funkcji, próba odzyskania zaznaczenia po nazwie nie działa dla mnie, musiałem użyć identyfikatora i nazwy klasy, aby uzyskać mój element

Oto prosta opcja. Wystarczy ustawić opcję listy, a następnie ustawić tekst jako wybraną wartość:

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

Pobierz dzieci z wybranego pola; przechodzić przez nie; gdy znajdziesz ten, który chcesz, ustaw go jako wybraną opcję; zwraca false, aby zatrzymać zapętlenie.