How do I select displayed value as opposed to VALUE options?

Question

We have the following SELECT combobox that is populated dynamically with ajax and httphandler web service (.ashx).

When SELECT combobox is dynamically populated, it looks like this:

<select name="selectid" id="selectid">
<option value="">-Select an option-</option>
<option value="1">Test1</option>
<option value="2">Test2</option>
<option value="3">Test3</o4tion>
<option value="4">Test5</option>
<option value="5">Test6</option>
<option value="6">Test7</option>
  </select>

Below is the js:

function getText() {
    $.ajax({
        url: 'rulings.ashx',
        dataType: 'json'
    })
    .done(function(textInfo) {
        $(textInfo).each(function(i, texts) {
            $('<option>').val(texts.dbtextID).text(texts.textToBeDisplayed).appendTo( $('#selectid') );


        })
    });
}

When we display the values from the dropdown, it displays the VALUE options instead of the displayed text.

Example from the combobox above, it displays 1 instead of Test1.

How do I modify the script to show displayed text instead of VALUE options?

http://stackoverflow.com/questions/196684/jquery-get-specific-option-tag-text — u_mulder, Dec 15 '13 at 19:35
What exactly do you want to do? Fetch the text instead of the value onChange ? — Harsha Venkataramu, Dec 15 '13 at 19:39
@harsha, yes, exactly. We do have a summary page to display user's selections. On that summary page, if user selects VALUE option 1, we would like to display Text1 instead of value option of 1. Hope this clearer. — Chidi Okeh, Dec 15 '13 at 19:44

Harsha Venkataramu · Accepted Answer · 2013-12-15T20:32:01.503

2

Try this code , just put it inside

$(document).ready(function(event){
    $("#selectid").on('change',function() {
        //alert($("#selectid option:selected").text());
        $('#summTextvalue').html($("#selectid option:selected").text());
    });
})

The ON method in jQuery can bind events to dynamically created elements.

or you can also do something like

function _bindEvent()
{
    $("#selectid").on('change',function() {
        alert($("#selectid option:selected").text());
    });
}

and call _bindEvent() from your AJAX done method

edited Dec 15 '13 at 20:32

answered Dec 15 '13 at 19:46

Harsha Venkataramu

2,887
1
34
58

I think that for your solution to work, it needs to be integrated with the script I posted and that's where I am having problem. – Chidi Okeh Dec 15 '13 at 19:51
The first solution seems to be getting the displayed text on the alert. This is great but I would rather have it display in the summary section. So, instead this: `
Name:
`, I like the value from your solution. Any ideas? – Chidi Okeh Dec 15 '13 at 20:30
@ChidiOkeh : Look at the modified answer – Harsha Venkataramu Dec 15 '13 at 20:32
BINGO! Thanks so very much for your kindness and assistance. – Chidi Okeh Dec 15 '13 at 20:44
@ChidiOkeh : Glad to be of assistance – Harsha Venkataramu Dec 15 '13 at 20:45

score 0 · Answer 2 · answered Dec 15 '13 at 19:55

0

Try this to get text, instead of value.

$('#selectid').change(function(){

   var selectedVal=$(this).val();
   alert($(this).children("option[value='"+selectedVal+"']").text());

});

answered Dec 15 '13 at 19:55

akbar ali

427
2
6

Isn't this a round about way of doing things ;-) – Harsha Venkataramu Dec 15 '13 at 19:58

How do I select displayed value as opposed to VALUE options?

2 Answers2