在克隆的选择对象中搜索选项值并设置选中（如果存在）

Posted 2023-05-09

【中文标题】在克隆的选择对象中搜索选项值并设置选中（如果存在）

【英文标题】：Search cloned select object for option value and set selected if exists

【发布时间】：2014-10-15 15:48:40

【问题描述】：

我要做的是克隆一个模板选择下拉元素，改变它的一些属性，然后查看一个字符串是否作为选项值存在，如果存在，然后继续并在我之前预先选择该选项值附加它。

/* Generated html inputs for mapping */
    function build_map_input( col_name ) 

        var select = jQuery("#leads_map").clone();

        /* alter dropdown attributes */
        select.attr( 'id' , col_name );         
        select.attr( 'style' , '' );            
        select.attr( 'name' , col_name );   

        /* attempt to preselect values if applicable */
        /*** This is where I need help. My needle is col_name ****/

        var select_html = select.prop('outerHTML');;

        /* build html */
        var html= '<div class="row">';
        html += '   <div class="col-md-3">';
        html +=         col_name;
        html += '   </div>';
        html += '   <div class="col-md-3">';
        html +=         select_html;
        html += '   </div>';
        html += '</div>';

        /* append html to map container */
        jQuery('#map-container').append(html);


    

【参考方案1】：

我在我的电脑上试过你的代码，它运行得很好。但是我建议使用此代码：

/* build html */
var html= '<div class="row">';
html += '   <div class="col-md-3">';
html +=         col_name;
html += '   </div>';
html += '   <div class="col-md-3">';
html +=         select_html;
html += '   </div>';
html += '</div>';

替换为这个：

var html = $('<div/>',  class: "row" );
$('<div/>',  class: "col-md-3", text: col_name ).appendTo(html);
$('<div/>',  class: "col-md-3", html: select_html ).appendTo(html);

这样，代码的阅读将变得轻松愉快。

您也可以使用 $ 标记代替 jQuery。

【讨论】：

我喜欢你如何缩短它。我会换成你的风格。出于某种原因，在 WordPress 环境中使用 $ 往往会产生冲突。我一直不明白为什么。 jQuery 一直是安全的选择。 --- 如果选择选项作为值存在，则预选选项的问题仍然存在，所以我现在必须不回答这个问题。