向创建的每个select元素添加必需的标记

时间:2014-03-19 10:51:54

标签: javascript jquery

我有以下代码:

HTML:

<a href="#" style="margin-left:5px;" id="addZona" class="btn-small btn-success">

JS代码

$('#addZona').live('click',function(){
        var cont = $("#sc_zonas_agente div.row-fluid" ).length;
        var listaPaises = '<?php echo str_replace( "\n","",CstudomusHelper::getPaises('id_pais_zona%$1', 'onchange="javascript:CargaProvincias(this.value,false,undefined,%$1)" class="required" required="required" ', $agente->id_pais )); ?>'
        var listaProvi = CargaProvinciasAgente('<?php echo $agente->id_pais; ?>','<?php echo $agente->id_provincia;?>','','id_provincia_zona'+ cont,'<?php echo JText::_('COM_CSTUDOMUS_SELECT_PROVINCIAS');?>',cont);

        var listaZonas = CargaZonasAgente('id_zona'+ cont,'<?php echo JText::_('COM_CSTUDOMUS_SELECT_ZONA');?>',cont);
        //lista = lista.replace('\n','');

        var html = '<div id="zona' + cont +'" class="row-fluid">';

        html +='<div class="span3"><div class="bfElemWrap control-group paises_zona' + cont + '"><div class="controls"><label class="control-label uk-text-left" for="id_pais_zona' + cont + '"><span class="editlinktip hasTip" title="<?php echo JText::_('COM_CSTUDOMUS_AGENTE_PAISES_DESC');?>" data-uk-tooltip=""><?php echo JText::_('COM_CSTUDOMUS_PAISES');?></span></label>';
        for (var i=0; i<4; i++)
            listaPaises= listaPaises.replace("%$1",cont);
        html += listaPaises;
        html +='</div></div></div>';

        html +='<div class="span3"><div class="bfElemWrap control-group provincias_zona' + cont +'"><div class="controls"><label class="control-label uk-text-left" for="id_provincia_zona' + cont +'"><span class="editlinktip hasTip" title="<?php echo Jtext::_('COM_CSTUDOMUS_AGENTE_PROVINCIAS_DESC');?>" data-uk-tooltip=""><?php echo JText::_('COM_CSTUDOMUS_PROVINCIAS');?></span></label>';           
        html += listaProvi;             
        html +='</div></div></div>';
        html +='<div class="span3"><div class="bfElemWrap control-group municipios_zona' + cont + '"><div class="controls"><label class="control-label uk-text-left" for="id_municipio_zona' + cont +'"><span class="editlinktip hasTip" title="<?php echo Jtext::_('COM_CSTUDOMUS_AGENTE_MUNICIPIOS_DESC');?>" data-uk-tooltip=""><?php echo JText::_('COM_CSTUDOMUS_MUNICIPIOS');?></span></label><select id="id_municipio_zona' + cont +'" name="id_municipio_zona' + cont +'"><option value="" selected="selected"><?php echo JText::_('COM_CSTUDOMUS_SELECT_MUNICIPIOS');?></option></select>';
        html +='</div></div></div>';
        html +='<div class="span3"><div class="bfElemWrap control-group"><div class="controls"><label class="control-label uk-text-left" for="id_zona' + cont +'"><span class="editlinktip hasTip" title="<?php echo Jtext::_('COM_CSTUDOMUS_AGENTE_ZONAS_DESC');?>" data-uk-tooltip=""><?php echo JText::_('COM_CSTUDOMUS_ZONA');?></span></label>';
        html += listaZonas;
        html +='</div></div></div>';
        html +='<a href="#" id="removeZona" data-zona="zona' + cont +'" class="btn-small btn-danger uk-float-right" style="margin-top:-35px;"><span data-uk-tooltip title="<?php echo JText::_('COM_CSTUDOMUS_REMOVE_ZONA_DESC');?>" class="editlinktip hasTip"><i class="icon-trash"></i></span></a>';
        html +='</div>'
        $('#sc_zonas_agente').append(html);

        //Añadimos valor al contador de zonas
        $('#contZonas').val(cont);
        return false;
    });

我想知道,如何在点击上面显示的"required"按钮时为每个选择字段添加#addZona属性?

3 个答案:

答案 0 :(得分:1)

这应该可以解决问题:

$('#sc_zonas_agente').append(html).find("select").attr("required", "");

答案 1 :(得分:0)

您可以将所有可以选择的字段设为一个类,这样无论何时单击该按钮,您都可以调用:

var elements = document.getElementsByClass(className);
elements.forEach(function(element) {
    element.setAttribute('required', true);
}

它可能正常工作(未经测试)。

答案 2 :(得分:0)

查看此示例,我们将属性添加到html元素here $("#previous").attr("control", "-6");。希望有所帮助