Tengo un script PHP en el que necesito pasar tres valores al valor de un cuadro de selección, por ejemplo:

echo  '<option value="' . $city . "," . $row['start_date'] . "," . $row['end_date'] . '">' . $row['start_date'] . " - " . $row['end_date'] . '</option>';

Se ve así en HTML:

<option value="la,10/19/2019,10/20/2019">10/19/2019 - 10/20/2019</option>

Por lo tanto, necesito recibir la ciudad, la fecha de inicio y la fecha de finalización del valor. ¿Cómo obtengo los tres valores de ese cuadro usando JavaScript y los separo en sus propias variables únicas?

Si estoy usando la terminología incorrecta aquí, edite la publicación para reflejar la terminología correcta.

-1
user11981274 5 oct. 2019 a las 23:19

5 respuestas

La mejor respuesta

Puede obtener el valor consultando el dom con algo como esto:

const value = document.querySelector('option').value;

Y puede usar split() para separar la cadena en una matriz de tres cadenas:

const optionValues = value.split(',');
const city = optionValues[0];
const startDate = optionValues[1];
const endDate = optionValues[2];
1
Oriol Grau 6 oct. 2019 a las 08:04
[city,from,to]= document.querySelector('option').value.split(',');

En una situación real, obtendría el valor del elemento seleccionado y no de la opción que contiene.

0
cars10m 5 oct. 2019 a las 20:32

No estoy seguro si entiendo claramente lo que está pidiendo.

Parece que está renderizando una html <form> usando una PHP vista en plantilla .

Supongo que desea programáticamente, del lado del cliente, desea utilizar Ecmascript 6 (también conocido como JavaScript) para manipular su entities.

Puede estructurar un Entity class y actualizarlo en cualquier lugar utilizando su <select>, por ejemplo, todo este ciclo que necesita saber sobre:

class Entity {
  constructor(city, startDate, endDate) {
    this.city = city;
    this.startDate = new Date(startDate);
    this.endDate = new Date(endDate);
  }
  
  toString() {
    return `In ${this.city} between ${this.startDate} and ${this.endDate}`;
  }
}

function bindEvents() {
  const form = document.querySelector('form[name="example"]');
  
  form.addEventListener('submit', onSubmit, true);
  form.picker.addEventListener('change', onChangePicker, true);
}

function onChangePicker(e) {
  const [city, startDate, endDate] = e.target.value.split(',');
  const entity = new Entity(city, startDate, endDate);
  updateResult(entity);
}

function updateResult(description) {
  document.querySelector('form[name="example"] span[name="result"]')
    .innerHTML = description;
}

// imagine you want to submit
async function onSubmit(e) {
  e.preventDefault();
  const select = document.querySelector('select[name="picker"]')
  const [city, startDate, endDate] = select[select.selectedIndex].value.split(',');
  const entity = new Entity(city, startDate, endDate);
  entity.updateDate = new Date().toISOString();
  const response = await fetch('https://httpbin.org/post', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(entity),
  });
  // this is an example and totally depend on your server
  const content = await response.json();
  console.log(content.data);
}


window.onload = bindEvents;
span[name="result"] {
  color: #652484;
}

label {
  display: block;
}
<form name="example">
  <label for="picker">Selected value: <span name="result"></span></label>
  <select name="picker">
    <option value="Los Angeles,10/19/2019,10/20/2019">10/19/2019 - 10/20/2019</option>
    <option value="New York,11/19/2019,11/20/2019">11/19/2019 - 11/20/2019</option>
    <option value="Chicago,12/19/2019,12/20/2019">12/19/2019 - 12/20/2019</option>
  </select>
  <div>
    <button name="submit">Submit</button>
  </div>
</form>

Esto es para navegadores modernos (Chrome, Safari, IE11, Firefox).

Espero que sea de ayuda.

0
Dimitri Kopriwa 5 oct. 2019 a las 21:21

Podrías usar .split()

const Sel = document.getElementById("city");
const val = Sel.options[e.selectedIndex].value;
const.pts = val.split(',');

console.log(pts)
0
Roko C. Buljan 9 ene. 2020 a las 12:49

Puede usar la función split y dividirla entre ,.

const arr = val.split(",");
0
T. Short 5 oct. 2019 a las 20:24