Question

这是我的下拉菜单。

<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语句起作用。例如，如果我将第一个if语句的innerHTML更改为＆＃34; test＆＃34;，当我加载页面时，span标记中的值为＆＃34; test＆＃34;。但是，通过选择＆＃34; rank 2＆＃34;，它不会更改span标签的内部HTML。

最好，我想使用纯Javascript完成此操作，但欢迎使用Jquery。

Answer 1

您的代码运行正常，只需添加eventListener，当您更改select的dropdown值时，会每次调用更改，如下所示。

   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>

Answer 2

将if语句放在函数中，并在select的更改事件上调用该函数。

<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>

Answer 3

只需使用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";
    }

    }

    }

Answer 4

使用某种形式的＆＃34;字典＆＃34;

的替代解决方案

＆＃13;

(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'));
})();

＆＃13;

<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>

＆＃13;

根据下拉列表选择动态更改内容

4 个答案: