如何基于<p>价值

how to select drop down list based on <p> value

本文关键字：价值 gt lt 何基于      更新时间：2023-09-26

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

下拉列表显示第一项。我需要根据<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>');
});​

演示

如果你试图默认选择"教授"，这将起到作用：

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

固定jsFiddle

你可以这样做：

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

你能使用数组吗？

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

有一种方法：

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

在替换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/

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

与其试图一次附加所有<select>，我更愿意这样做。这样，您就可以检查默认选项并在其上设置所选属性

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

下面是一个工作示例。

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

$('.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');
});​
相关文章：