0
私はコードを作成しています。名前の1つをクリックすると、オプション値に基づいてプログレスバーが特定の量だけ移動します。ドロップダウンボックスとプログレスバー
<!DOCTYPE html>
<html>
<head>
<title>testinggg</title>
<link rel="stylesheet" type="text/css" href="AuditScriptAssesmentToolTest.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="~/Scripts/jquery-1.12.4.min.js"></script>
</head>
<body>
<select id="selectA">
<option value=" " disabled selected>Choose One...</option>
<option id="option1" value="5">Mike</option>
<option id="option2" value="10">Andrew</option>
<option id="option3" value="15">Michael</option>
<option id="option4" value="20">Danny</option>
<option id="option5" value="25">Cozz</option>
<option id="option6" value="30">Andrew</option>
<option id="option7" value="35">Pete</option>
<option id="option8" value="40">Sean</option>
<option id="option9" value="45">Dom</option>
<option id="option10" value="50">Marc</option>
<option id="option11" value="0">Lou</option>
<option id="option12" value="0">Rob</option>
</select>
<select id="selectB">
<option value=" " disabled selected>Choose One...</option>
<option id="option1" value="5">Mike</option>
<option id="option2" value="10">Andrew</option>
<option id="option3" value="15">Michael</option>
<option id="option4" value="20">Danny</option>
<option id="option5" value="25">Cozz</option>
<option id="option6" value="30">Andrew</option>
<option id="option7" value="35">Pete</option>
<option id="option8" value="40">Sean</option>
<option id="option9" value="45">Dom</option>
<option id="option10" value="50">Marc</option>
<option id="option11" value="0">Lou</option>
<option id="option12" value="0">Rob</option>
</select>
<progress id='progressBar' max='100' value='0'></progress>
<script>
//document.getElementById("selectA").selectedIndex;
var doneA = false;
$('#selectA').on('change', function() {
if (!doneA) {
$("#progressBar").attr('value', $("#progressBar").prop('value')+25);
doneA = true;
}
});
var doneB = false;
$('#selectB').on('change', function() {
if (!doneB) {
$("#progressBar").attr('value', $("#progressBar").prop('value')+25);
doneB = true;
}
});
</script>
</body>
</html>あなたは（私はそれがあまりにも設定されているのthats何ので）名前をクリックすると今では25％を移動します。私の質問は25の値を与える代わりに、私はそれに特定のオプションの値を与えることができますか？たとえば、目標はこれを行うことですので、（ダニーある）オプション4は、20の値を持っている...
$("#progressBar").attr('value', $("#progressBar").prop('value')+Option4);
の代わり：
$("#progressBar").attr('value', $("#progressBar").prop('value')+ 25);
うん、私はバーを移動することができています他のすべての答えに気づいたが、私はそれらをクリックした後、私は答えを変更することができますが、それはもう、プログレスバーを動かす習慣....うあなたはあなたのアイデアをjfiddleに入れてもいいですか？大いに感謝されるでしょう:) – Mitch
jsfiddleを追加するために編集 –
うん、これはそれです！どうもありがとうございます！！！私はこれを3日間まっすぐ笑いながら働いています。だから私は2つ以上のドロップダウンボックスを持っている場合私はちょうどopt 3と別のif文を追加するだろうか？ – Mitch