Get text from value in a selection

Question

I try to create a function, I pass a selector plus the value and I would like to get text

function getTextBySelectorAndValue(selector, value) {
    return $(selector + " option[value='" + value + "']").text();
}

Error i get it's Syntax error, unrecognized expression: [object Object] option[value='1']

Seem like selector is not really working

I call this method like

getTextBySelectorAndValue($("#lodgerAppointmentLocation"), $("#lodgerAppointmentLocation").val());

try `selector.find("option[value='" + value + "']").text();` — wirey00, Dec 10 '15 at 20:34
[I can't reproduce the problem](http://jsfiddle.net/29gz5gLg/). You may want to include more of your code to help demonstrate. — showdev, Dec 10 '15 at 20:36
In addition to the other feedback, if you have browser support, please consider using `CSS.escape(value)` in place of value when constructing your selector expression -- it will eliminate some rare bugs. Concatenating generic strings into CSS selectors is as semantically problematic as concatenating them into HTML code. — Jeremy, Dec 10 '15 at 20:50

score 3 · Accepted Answer · edited May 23 '17 at 12:23

You are passing a jQuery object to a function that expects a string selector.

I suggest either passing the existing function a selector string...

function getTextBySelectorAndValue(selector, value) {
  return $(selector + " option[value='" + value + "']").text();
}

$('#lodgerAppointmentLocation').on('change', function() {
  $('div#output').text(getTextBySelectorAndValue("#lodgerAppointmentLocation", $("#lodgerAppointmentLocation").val()));
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="lodgerAppointmentLocation">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<div id="output"></div>

...or changing the function to handle a jQuery object:

function getTextBySelectorAndValue($selected, value) {
  return $selected.find("option[value='" + value + "']").text();
}

$('#lodgerAppointmentLocation').on('change', function() {
  $('div#output').text(getTextBySelectorAndValue($("#lodgerAppointmentLocation"), $("#lodgerAppointmentLocation").val()));
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="lodgerAppointmentLocation">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<div id="output"></div>

Alternatively, you can use the :selected selector to retrieve the selected option's text:

function getTextBySelectorAndValue($selected, value) {
  return $selected.find("option[value='" + value + "']").text();
}

$('#lodgerAppointmentLocation').on('change', function() {
  $('div#output').text($(this).find('option:selected').text());
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="lodgerAppointmentLocation">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<div id="output"></div>

Edit

I like AtheistP3ace's challenge of handling either a jQuery object or a selector string.
I used instanceof jQuery to identify a jQuery object per Check if object is a jQuery object:

function getTextBySelectorAndValue(selector, value) {
  return selector instanceof jQuery ?
           selector.find("option[value='" + value + "']").text() :
           $(selector+" option[value='" + value + "']").text() ;
}

$('div#output').text(
  getTextBySelectorAndValue("#lodgerAppointmentLocation1", 1) + " / " +
  getTextBySelectorAndValue($("#lodgerAppointmentLocation2"), 2)
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="lodgerAppointmentLocation1">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<select id="lodgerAppointmentLocation2">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<div id="output"></div>

Or even more fun change the function to handle a jQuery object and a selector string. =] — AtheistP3ace, Dec 10 '15 at 20:47

Get text from value in a selection

1 Answers1

Edit