#javascript #html #arrays #select #onchange
Вопрос:
Как выбрать свойство в select и отобразить текст массива text[0] и так далее, мне нужно было добавить эту функцию в этот код, не изменяя ее.
Извините, я уже задавал этот вопрос раньше, но я не смог адаптироваться, поэтому я публикую другой код
<!DOCTYPE html>
<html>
<script>
var property = new Array();
property[0] = "Acceleration";
property[1] = "Area";
property[2] = "Lenght";
property[3] = "Weigth";
var text = new Array();
text[0] = "Aceleration is the first value of converter";
text[1] = "Area is the second value of converter";
text[2] = "Aceleration is the first value of converter";
text[3] = "Area is the second value of converter";
function FillMenuWithArray(myMenu, myArray) {
var i;
myMenu.length = myArray.length;
for (i = 0; i < myArray.length; i ) {
myMenu.options[i].text = myArray[i];
}
}
window.onload = function(e) {
FillMenuWithArray(document.property_form.the_menu, property)
}
</script>
<body>
<h2>What Can JavaScript Do?</h2>
<form name="property_form">
<span>
<select class="select-property" name="the_menu">
</select>
</span>
</form>
<br>
<br>
<p id="text">Text</p>
</body>
</html>
Комментарии:
1. Итак, вы пытаетесь показать выбранный автомобиль в абзаце? Что
UpdateUnitMenuпроисходит? поделитесь кодом.2. игнорирует этот фрагмент, это потому, что этот код преобразователя единиц, UpdateUnitMenu обновляет два ввода со значениями для преобразования
3. я прав, вы хотите показать выбранную машину в абзаце
4. Да, когда я выбираю автомобиль, появляется текст в <span>или <p>. или также как отобразить ссылку на встроенную страницу в html
5. Проверьте решение. Я это то, что тебе нужно?
Ответ №1:
В вашем коде возникло несколько проблем, поэтому я счел лучшим написать свою собственную связанную версию, на которую вы можете ссылаться. Вы можете запустить фрагмент кода здесь, чтобы убедиться, что это то, что вы ищете.
var cars = {
Saab: "This is a Saab.",
Fiat: "I love Fiat.",
BMW: "Some people call BMW's a beamer."
}
var select = document.querySelector(".select-car");
var p = document.querySelector("p#demo");
Object.keys(cars).forEach(car => {
const option = document.createElement("option");
option.value = car;
option.append(car);
select.append(option);
})
select.onchange = function () {
p.innerText = cars[select.options[select.selectedIndex].value] || "";
}; <h2>JavaScript Arrays</h2>
<form name="property_form">
<span>
<select class="select-car" name="the_menu">
<option value="">Choose Car</option>
</select>
</span>
</form>
<p id="demo"></p> Комментарии:
1. это верно, но мне нужно отобразить не текст самого массива, а текст о нем. Например, у вас массив автомобилей saab, я хочу отобразить текст об автомобиле
2. Я обновил ответ, чтобы показать вам, как вместо этого показывать описание для каждого автомобиля.
3. правильно, я постараюсь использовать это в качестве ссылки, спасибо. если вы тоже поможете мне адаптироваться к моему коду
Ответ №2:
const p = document.querySelector("#demo");
var cars = new Array();
cars.push("Saab", "Fiat", "BMW");
var text = new Array();
text[0] = "Saab 9-3 Viggen was the jet on wheels of the Swedish brand";
text[1] = "Fiat9 Viggen brand";
function FillMenuWithArray(myMenu, myArray) {
// Fills the options of myMenu with the elements of myArray.
myMenu.innerHTML = myArray.map(c => `<option value='${c}'>${c}</option>`).join('');
}
window.onload = function(e) {
FillMenuWithArray(document.property_form.the_menu, cars);
// when changed on select change in paragraph
document.property_form.the_menu.addEventListener('change', function(e){
const ptext = text[e.target.selectedIndex-1] ?? '';
p.innerHTML = `<span>${ptext}</span>`;
});
} <form name="property_form">
<select class="select-car" name="the_menu">
<option value="">Select car</option>
</select>
<p id="demo"></p>
</form> Комментарии:
1. Я буду использовать твой код в качестве ссылки, братан, действительно спасибо за помощь
2. Хорошо, проверьте обновленный ответ, чтобы он соответствовал потоку ваших функций.
3. братан, большое тебе спасибо
Ответ №3:
В конце концов мне удалось объединить два решения (спасибо за вклад), чтобы достичь этого результата, при выборе опции появляется соответствующий текст, и он был более похож на предыдущий код
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<form name="property_form">
<select class="select-car" name="the_menu">
<option value="">Select car</option>
</select>
<p id="demo"></p>
</form>
<script>
const p = document.querySelector("#demo");
var cars = new Array();
var text = new Array();
cars[0] = "Saab";
text[0] = new Array("<option value='/acceleration'></option>");
cars[1] = "fiat";
text[1] = "Fiat9 Viggen brand";
cars[2] = "bmw"
text[2] = "Some people call bmw a beamer";
function AbrirSecao(secao){
window.open("" secao "", "_parent");
}
function AbrirSecao(secao) {
let display = document.getElementById('#text')
fetch(secao).then(function(response) {
// The API call was successful!
return response.text();
}).then(function(html) {
// This is the HTML from our response as a text string
var parser = new DOMParser();
var doc = parser.parseFromString(html, 'text/html');
const element = doc.querySelector('body > *');
display.appendChild(element);
}).catch(function(err) {
// There was an error
console.warn('Something went wrong.', err);
});
}
function FillMenuWithArray(myMenu, myArray) {
// Fills the options of myMenu with the elements of myArray.
myMenu.innerHTML = myArray.map(c => `<option value='${c}'>${c}
</option>`).join('');
}
window.onload = function(e) {
FillMenuWithArray(document.property_form.the_menu, cars);
// when changed on select change in paragraph
document.property_form.the_menu.addEventListener('change', function(e)
{
const ptext = text[e.target.selectedIndex-1] ?? '';
p.innerHTML = `<span>${ptext}</span>`;
});
}
</script>
</body>
</html>