javascript - how to select drop down list based on value

Question

Click form edit has trouble on drop down list

Dropdown list shows first item. I need to select value based on <p>Professor<p/>

html

<p>Title</p>
<p class='title'>Professor</p>

JQuery

$('.title').click(function(){
    $(this).replaceWith('<select class="title" name="title"><option >Please Select</option><option value="Mr">Mr</option><option value="Mrs">Mrs</option><option value="Ms">Ms</option><option value="Miss">Miss</option><option value="Dr">Dr</option><option value="Professor">Professor</option><option value="Sir">Sir</option></select>');
});​

Demo

Answer 1

If you are trying to select 'professor' by default this will do the trick:

$('.title').click(function(){
    var target = $(this);
    var text = target.text();
    var select = $('<select class="title" name="title"><option selected="selected">Please Select</option><option value="Mr">Mr</option><option value="Mrs">Mrs</option><option value="Ms">Ms</option><option value="Miss">Miss</option><option value="Dr">Dr</option><option value="Professor">Professor</option><option value="Sir">Sir</option></select>');
    select.find('option[value="' + text + '"]').prop("selected", true);
    target.replaceWith(select);
});

Fixed jsFiddle

Answer 2

You can do it like this:

$('.title').click(function(){
    $(this).replaceWith('<select class="title" name="title"><option selected="selected">Please Select</option><option value="Mr">Mr</option><option value="Mrs">Mrs</option><option value="Ms">Ms</option><option value="Miss">Miss</option><option value="Dr">Dr</option><option value="Professor">Professor</option><option value="Sir">Sir</option></select>');
    $('.title').val($(this).text());
});​

Answer 3

Can you use an array ?

$('.title').on("click", function(){
    var selected = $(this).text();

    var contents = null;
    var options = ['Mr', 'Mrs', 'Ms', 'Miss', 'Dr', 'Professor', 'Sir'];

    for ( i = 0 ; i < options.length ; i++ )
    {
        if ( options[i] == selected )
            contents += '<option value='+ options[i] +' selected="selected">'+ options[i] +'</option>';
        else              
            contents += '<option value='+ options[i] +'>'+ options[i] +'</option>';
    }

    $(this).replaceWith('<select class="title" name="title"><option>Please Select</option>'+ contents +'</select>');
});

Answer 4

Ona way to do it:

$('.title').click(function(){
    var pVal = this.innerHTML;
    $(this).replaceWith('<select class="title" name="title"><option selected="selected">Please Select</option><option value="Mr">Mr</option><option value="Mrs">Mrs</option><option value="Ms">Ms</option><option value="Miss">Miss</option><option value="Dr">Dr</option><option value="Professor">Professor</option><option value="Sir">Sir</option></select>');
    $('select.title').val(pVal);
});​

http://jsfiddle.net/U7rAc/6/

Answer 5

You need to store the text of the paragraph that was clicked before you replace the HTML. Then use jQuery to find the select list you've created and set its value.

$('.title').click(function(){
    var $this = $(this),
        selected = $this.text();
    $this.replaceWith('<select class="title" name="title"><option selected="selected">Please Select</option><option value="Mr">Mr</option><option value="Mrs">Mrs</option><option value="Ms">Ms</option><option value="Miss">Miss</option><option value="Dr">Dr</option><option value="Professor">Professor</option><option value="Sir">Sir</option></select>');
    $('.title').val(selected);
});​

in the fiddle: http://jsfiddle.net/U7rAc/5/

Answer 6

    var theValue = $(this).html();
    $("select.title").val( theValue ).attr('selected',true);

Answer 7

Rather than trying to append your <select> all at once, I'd do something more like this. That way, you can check for a default option and set the selected attribute on it.

$('.title').click(function() {
    var $this = $(this),
        $select = $('<select>'),
        defaultValue = $this.text(),
        options = [
            'Please Select',
            'Mr',
            'Mrs',
            'Ms',
            'Miss',
            'Dr',
            'Professor',
            'Sir'
        ];

    $.each(options, function() {
        var $option = $('<option>');
        $option.text(this);
        $option.val(this);
        if (this == defaultValue) {
            $option.attr('selected', 'selected');
        }
        $select.append($option);
    });

    $this.replaceWith($select);
});​

Here's a working example.

Answer 8

Try something like this. This will convert and select the same value in the option list as that which was clicked on.

$('.title').click(function(){
    var selected_item = $(this).html();
    $(this).replaceWith('<select class="title" name="title"><option>Please Select</option><option value="Mr">Mr</option><option value="Mrs">Mrs</option><option value="Ms">Ms</option><option value="Miss">Miss</option><option value="Dr">Dr</option><option value="Professor">Professor</option><option value="Sir">Sir</option></select>');
    $('option:contains("' + selected_item + '")', 'select.title').prop('selected', 'selected');
});​