2

Estoy creando un select dinámico y tengo problemas al momento de pasar el valor por defecto, por ejemplo, tengo lo siguiente:

var valor = '1';
$('<select>', { 'class':'form-control' })
  .append($('<option>', { 'value':'1', 'text':'Boleta' }))
  .append($('<option>', { 'value':'2', 'text':'Factura' }))
  .append($('<option>', { 'value':'3', 'text':'Ticket' }))
  .appendTo('#content');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="content"></div>

Como ven, estoy creando el select de forma dinámica, lo que quiero hacer es que quede seleccionado la variable según el valor de la variable valor, pero no encuentro la forma de hacerlo.

Trate de poner una condición a cada uno así

var valor = '1';
$('<select>', { 'class':'form-control' })
  .append($('<option>', { 'value':'1', 'text':'Boleta', 'selected': (valor == '1' ? 'selected' : '') }))
  .append($('<option>', { 'value':'2', 'text':'Factura', 'selected': (valor == '2' ? 'selected' : '') }))
  .append($('<option>', { 'value':'3', 'text':'Ticket', 'selected': (valor == '3' ? 'selected' : '') }))
  .appendTo('#content');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="content"></div>

Pero como ven, no funciona ya que investigando me di cuenta que el atributo selected solo tiene un valor que es el mismo selected="selected" y no se le puede colocar un selected="true || selected="false" para poder hacer una condición

Referente a la pregunta quiero lograr algo como esto:

.append($('<option>', { 'value':'1', 'text':'Boleta', (valor == '1' ? 'selected': '') }))

Si me podrian ayudar en esto, gracias a todos!

1 respuesta 1

3

El problema se da porque según el Estandar HTML:

The selectedness of an option element is a boolean state, initially false. Except where otherwise specified, when the element is created, its selectedness must be set to true if the element has a selected attribute. Whenever an option element's selected attribute is added, if its dirtiness is false, its selectedness must be set to true. Whenever an option element's selected attribute is removed, if its dirtiness is false, its selectedness must be set to false.


La selección de un elemento option es un estado booleano, inicialmente falso. Excepto donde se especifique lo contrario, cuando se crea el elemento, su selectividad debe establecerse en verdadero si el elemento tiene un atributo selected. Siempre que se agrega el atributo selected de un elemento option, si su suciedad es falsa, su selección debe establecerse en verdadero. Siempre que se elimina el atributo selected de un elemento option, si su suciedad es falsa, su selección debe establecerse en falso.

En otras palabras, en tu código todos estan selected por el hecho de tener el atributo.

Solución:

Si estableces el atributo selected como booleano (true | false) y no como cadena, el problema no ocurre.

Ejemplo:

var valor = '1';
$('<select>', { 'class':'form-control' })
  .append($('<option>', { 'value':'1', 'text':'Boleta', 'selected': valor == '1' }))
  .append($('<option>', { 'value':'2', 'text':'Factura', 'selected': valor == '2' }))
  .append($('<option>', { 'value':'3', 'text':'Ticket', 'selected': valor == '3' }))
  .appendTo('#content');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="content"></div>

1
  • 1
    Interesante, creo que me hace falta investigar mas, gracias!
    – bemoba1437
    Commented el 28 ene. 2021 a las 17:39

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.