0

我正在通过脚本（Smarty）动态生成下拉列表。

如果下拉菜单只有一个选项值，是否可以将其显示为标签。

这将显示一个包含 3 个值的下拉列表。

<select>
    <option> 1 </option>
    <option> 2 </option>
    <option> 3 </option>
</select>

如果它只显示一个值然后将其显示为标签，是否可以使用纯 HTML 或 Jquery 或两者的组合？我可以使用 smarty 来检查值并抛出不同的 html，但这会使我的代码只要我有很多下拉菜单。

<select>
    <option> 1 </option>
</select>

任何简单的逻辑，我可能会遗漏吗？

更新（已解决）

感谢所有帮助的stackoverflow'ers。我使用了@ahren 提供的代码，它按要求工作。

但是我已经扩展了代码以将一个标签的属性复制到另一个标签，以防有人正在寻找

// To replace a <select>, with <label> tag if it has just one value
$('select').each(function(){
    if($(this).find('option').length === 1){

        // Copy all attributes from a given tag and save it in a variable.
        var attributes_from = $(this).prop("attributes");
        var attributes_to = '';
        $.each(attributes_from, function() {
            attributes_to += ' '+this.name+'="'+this.value+'"';
        });

        // If select then copy its value from option.
        attributes_to += ' value="'+$(this).find('option').attr('value')+'"';

        // Replace the <tag>
        $(this).replaceWith(function(){
            return $('<label '+attributes_to+' />').html($(this).text());
        });
    }
});
4

2 回答 2

3 
$('select').each(function(){
  if($(this).find('option').length === 1){
    $(this).replaceWith(function(){
       return $('<label />').html($(this).text());
    });
  }
});

生成下拉列表后，您只需运行此代码段即可检查每个select元素。

演示：http: //jsfiddle.net/kqunE/

于 2013-03-21T10:27:32.267 回答
1

我会遍历每个<select>元素，检查它们拥有的选项数量，并相应地进行所需的 DOM 更改：

$('select').each(function(index, select) {
    var numOptions = $('option', this).length;
    if(numOptions === 1) {
        // replace the select element here - something like the below
        var label = $('<label>').html(this.value);
        $(this).after(label).hide();
    }
});

我选择隐藏而不是替换<select>元素，因此您仍然可以将值作为表单的一部分发回。如果这不是必需的，那么您可以完全删除该元素.remove()，而不是.hide().

于 2013-03-21T10:29:08.993 回答