Это мое выпадающее меню.

<select id="q-rank">
    <option value="1">Rank 1</option>
    <option value="2">Rank 2</option>
    <option value="3">Rank 3</option>
    <option value="4">Rank 4</option>
    <option value="5">Rank 5</option>
</select>

Значение в тегах span - это то, что я хочу изменить.

<span id="q-cd">16</span>
<span id="q-stats1">70</span>

Это мой JavaScript.

var qSelect = document.getElementById("q-rank");
var qCD = document.getElementById("q-cd");
var qStats1 = document.getElementById("q-stats1");

if(qSelect.value == "1"){
    qCD.innerHTML = "worked";
    qStats1.innerHTML = "70";
}

if(qSelect.value == "2"){
    qCD.innerHTML = "15";
    qStats1.innerHTML = "115";
}

if(qSelect.value == "3"){
    qCD.innerHTML = "14";
    qStats1.innerHTML = "160";
}

Первоначально, когда страница загружается, первый оператор if работает. Например, если я меняю innerHTML первого оператора if на что-то вроде «test», то при загрузке страницы значения в теге span будут «test». Однако, выбрав «ранг 2», он не изменит внутренний HTML тегов span.

Предпочтительно, я хочу сделать это, используя чистый Javascript, но приветствуется Jquery.

0
Roger 7 Янв 2017 в 06:35

4 ответа

Лучший ответ

Поместите операторы if в функцию и вызовите эту функцию в событии изменения выбора.

<select id="q-rank" onchange="setStats()">
    <option value="1">Rank 1</option>
    <option value="2">Rank 2</option>
    <option value="3">Rank 3</option>
    <option value="4">Rank 4</option>
    <option value="5">Rank 5</option>
</select>
0
Iso 7 Янв 2017 в 04:00

Альтернативное решение с некоторой формой «словаря»:

(function(){
	let qSelect = document.getElementById('q-rank');
	let qCD = document.getElementById('q-cd');
	let qStats1 = document.getElementById('q-stats1');
	
	let values = {
		1: { cd: 'worked', stat: '70' },
		2: { cd: '15', stat: '115' },
		some: { cd: '14', stat: '160' },
		other: { cd: '42', stat: 'hello' },
		key: { cd: 'hey', stat: 'hi' }
	};
	
	qSelect.addEventListener('change', e => {
		let value = values[e.target.value];
		qCD.innerHTML = value.cd;
		qStats1.innerHTML = value.stat;
	});
	
	qSelect.dispatchEvent(new Event('change'));
})();
<select id="q-rank">
    <option value="1">Rank 1</option>
    <option value="2">Rank 2</option>
    <option value="some">Rank 3</option>
    <option value="other">Rank 4</option>
    <option value="key">Rank 5</option>
</select>

<span id="q-cd"></span>
<span id="q-stats1"></span>
0
noahnu 7 Янв 2017 в 04:15

Ваш код работает нормально, вам просто нужно добавить eventListener, который вызывает изменения каждый раз, когда вы изменяете dropdown значение select, как показано ниже.

   var qSelect = document.getElementById("q-rank");
function clck(){
var qCD = document.getElementById("q-cd");
var qStats1 = document.getElementById("q-stats1");

if(qSelect.value == "1"){
qCD.innerHTML = "worked";
qStats1.innerHTML = "70";
}

if(qSelect.value == "2"){
qCD.innerHTML = "15";
qStats1.innerHTML = "115";
}

if(qSelect.value == "3"){
qCD.innerHTML = "14";
qStats1.innerHTML = "160";
}
}
qSelect.addEventListener('change',clck);
<select id="q-rank">
    <option value="1">Rank 1</option>
    <option value="2">Rank 2</option>
    <option value="3">Rank 3</option>
    <option value="4">Rank 4</option>
    <option value="5">Rank 5</option>
</select>

<span id="q-cd">16</span>
<span id="q-stats1">70</span>
1
frnt 7 Янв 2017 в 04:47

Просто используйте addEventListener и поместите свою логику в функцию в JavaScript.

var qSelect = document.getElementById("q-rank");
var qCD = document.getElementById("q-cd");
var qStats1 = document.getElementById("q-stats1");

    qSelect.addEventListener("change", changer, false)
    function changer() {
    if(qSelect.value == "1"){
        qCD.innerHTML = "worked";
        qStats1.innerHTML = "70";
    }

    if(qSelect.value == "2"){
        qCD.innerHTML = "15";
        qStats1.innerHTML = "115";
    }

    if(qSelect.value == "3"){
        qCD.innerHTML = "14";
        qStats1.innerHTML = "160";
    }

    }

    }
0
Niraj 7 Янв 2017 в 04:20