如何根据 值选择下拉列表答案

【问题标题】：how to select drop down list based on value如何根据 值选择下拉列表
【发布时间】：2012-08-03 14:38:21
【问题描述】：

单击表单编辑在下拉列表中出现问题

下拉列表显示第一项。我需要根据Professor选择值

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

【问题讨论】：

您的问题是什么？如果问题是之前的值没有被选中，那么只需编辑replaceWith()中的字符串参数，并将“选中”移动到正确的位置。或者，$('select').val() 也应该在 replaceWith() 之后工作。
不确定您想在这里做什么。您是说要默认选择某个值吗？
@StefanMajewsky Majewsky 实际上选择的值应该基于以前的值
maanu：我很明白。
@Phillip Schmidt 是的，选择的值应该是值

标签： javascript jquery

【解决方案1】：

如果您尝试默认选择“教授”，则可以这样做：

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

【讨论】：

【解决方案2】：

你可以像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());
});

【讨论】：

【解决方案3】：

你可以使用数组吗？

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

【讨论】：

【解决方案4】：

一种方法：

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

【讨论】：

【解决方案5】：

在替换 HTML 之前，您需要存储所单击段落的文本。然后使用 jQuery 找到您创建的选择列表并设置它的值。

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

在小提琴中：http://jsfiddle.net/U7rAc/5/

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

与其尝试一次性附加您的<select>，不如做更多类似的事情。这样，您可以检查默认选项并在其上设置 selected 属性。

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

这是working example。

【讨论】：

【解决方案8】：

试试这样的。这将转换并在选项列表中选择与单击的值相同的值。

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

【讨论】：