使用 JavaScript 從 HTML 元素中檢索多個值？

Question

我有一個 PHP 腳本，其中我需要將三個值傳遞給 select 框的值，例如：

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

在 HTML 中看起來像這樣：

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

所以我需要從值中接收城市、開始日期和結束日期。 如何使用 JavaScript 從該框中獲取所有三個值並將它們分成各自的唯一變量？

如果我在這里使用了錯誤的術語，請編輯帖子以反映正確的術語。

Answer 1

您可以通過使用以下方式查詢 dom 來獲取值：

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

您可以使用split()將字符串分成三個字符串的數組：

const optionValues = value.split(',');
const city = optionValues[0];
const startDate = optionValues[1];
const endDate = optionValues[2];

Answer 2

你可以使用.split()

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

console.log(pts)

Answer 3

您可以使用split function 並將其拆分為, 。

const arr = val.split(",");

Answer 4

假設您的select元素的 id 為“myselect”：

 const selectElement = document.getElementById('myselect') const selectedValue = selectElement[selectElement.selectedIndex].value const parsed = selectedValue.split(',') const city = parsed[0] const startDate = parsed[1] const endDate = parsed[2] // same as following code: const [city, startDate, endDate] = selectedValue.split(',')

Answer 5

我不確定我是否清楚地了解您的要求。

您似乎正在使用PHP模板化視圖呈現html <form> 。

我假設您想以編程方式在客戶端使用Ecmascript 6 （又名 JavaScript）來操作您的entities 。

您可以構建一個Entity class ，並使用您的<select>在任何地方更新它，例如，這是您需要了解的所有周期：

 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>

這適用於現代瀏覽器（ Chrome 、 Safari 、 IE11 、 Firefox ）。

我希望它有所幫助。

Answer 6

[city,from,to]= document.querySelector('option').value.split(',');

在實際情況下，您當然會從 select 元素中獲取值，而不是從其中包含的選項中獲取值。