Titular en formulario_para campo selecto?

El respuestas a ¿Cómo uso un marcador de posición predeterminado ... en un select_tag? mostrar cómo establecer un por defecto valor para el campo selecto.

Por ejemplo: enter image description here

enter image description here

<%= f.select :country, countries, {include_blank: true, prompt: "United States"}, {required: true, class: "form-control"} %>

El problema aquí es que sólo quiero la silueta del titular del lugar, no un valor real que podría ser presentado accidentalmente.

Si comparamos con el placeholder valor en un text_field, la diferencia es mucho más clara. Nosotros ver el titular del lugar:

enter image description here

Pero no podemos accidentalmente presentar el marcador de posición.

¿Cómo puedo tener un comportamiento similar con el .select ¿campo?

Eso es, así que allí es ¿Alguna marca de posición en el campo selecto, pero no puede ser presentado accidentalmente?

Pregunta hecha hace 3 años, 4 meses, 29 días - Por algorithmwhiz

4 Respuestas:

  • Sólo cambia el boolean valor include_blank: true al titular deseado cuerda:

    <%= f.select :country,
             countries,
             { include_blank: "- nothing selected -" },
             { required: true, class: "form-control" } 
%>

    Esto creará una opción selecta preseleccionada sin valor, que será interpretada por los controladores Rails como nil.

    Respondida el Dec 17, 2020 a las 00:16 - por bugbusterx

    Votos positivos: 0 | Votos negativos: 0

  • Según https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select a select no placeholder Opción. Si desea mostrar un valor predefinido que no debe ser enviado puede añadir un disabled opción a este artículo específico y combinarlo con selected.

    <%= f.select :country, [['USA', 1], ['Canada', 2]], { disabled: '1', selected: '1' } %>

    Respondida el Dec 17, 2020 a las 00:24 - por bytebarricade

    Votos positivos: 0 | Votos negativos: 0

  • Para tener un comportamiento similar con el campo <select> como el atributo placeholder en un campo <input>, puedes utilizar un enfoque diferente. En lugar de intentar mostrar un texto predeterminado en lugar de opciones, puedes usar JavaScript para lograr el efecto deseado. Aquí te muestro un ejemplo de cómo hacerlo:

    • Deja el campo `

  • Para lograr un comportamiento similar a un marcador de posición en un campo de selección sin que se envíe accidentalmente, puedes utilizar una de las siguientes soluciones:

    Opción 1: Usar JavaScript

    Puedes utilizar JavaScript para ocultar y mostrar un elemento de opción con el texto del marcador de posición cuando el campo de selección está enfocado o desenfocado. Aquí tienes un ejemplo:

    javascript
const selectElement = document.getElementById('country');
const placeholderOption = selectElement.querySelector('option[value=""]');

selectElement.addEventListener('focus', () => {
  placeholderOption.style.display = 'none';
});

selectElement.addEventListener('blur', () => {
  if (selectElement.value === '') {
    placeholderOption.style.display = 'block';
  }
});

    Opción 2: Usar CSS

    Puedes utilizar CSS para establecer una apariencia de marcador de posición para la primera opción del campo de selección. Aquí tienes un ejemplo:

    css
country option:first-child {  color: 
    ccc;
      font-style: italic;
}

    Opción 3: Usar una biblioteca de terceros

    Existen bibliotecas de terceros como Select2 que proporcionan funcionalidad de marcador de posición para campos de selección. Estas bibliotecas a menudo ofrecen más funciones y personalización que las soluciones anteriores.

    Nota:

    Independientemente del método que elijas, asegúrate de que el texto del marcador de posición no sea un valor válido para el campo de selección. De lo contrario, podría enviarse accidentalmente con el formulario.

    Respondida el Dec 18, 2020 a las 00:20 - por Gemini

    Votos positivos: 0 | Votos negativos: 0