下拉框和進度條

因此，我正在研究代碼，並且我試圖使它成爲當我單擊其中一個名稱時，它會根據選項值將特定數量的進度欄移動。下拉框和進度條

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

現在它的動作只要你點擊一個名字25％（因爲這就是我把它設置得）。我的問題是，而不是給它的價值25，我可以給它具體的期權價值？例如3選項（這是丹尼）具有20的值，因此我們的目標是做到這一點...

$("#progressBar").attr('value', $("#progressBar").prop('value')+Option4);

代替：

$("#progressBar").attr('value', $("#progressBar").prop('value')+ 25);

來源

2017-05-12 Mitch

您可以檢索所選選項的值通過jquery。但是，我不太瞭解你的邏輯。像這樣的東西會讓用戶改變他們的答案並正確更新進度欄。當選擇更改時，不是在進度欄中添加值，而是每次選擇更改時計算該值應該是多少。

function update_progressbar() { 
    var opt1 = parseInt($('option:selected', $('#selectA')).val()); 
    var opt2 = parseInt($('option:selected', $('#selectB')).val()); 

    var total = isNaN(opt1) ? 0 : opt1; 
    if (!isNaN(opt2)) { 
     total += opt2; 
    } 
    $("#progressBar").prop('value', total) 
} 

$('#selectA').on('change', update_progressbar); 
$('#selectB').on('change', update_progressbar);

小提琴這裏：

https://jsfiddle.net/nf6zojLt/2/

我也不得不做出改變，以檢查的NaN。由於parseInt（）爲非值返回NaN，所以我意識到在第一次選擇更改時沒有任何更改。另外，您不希望使用.attr來調整佔位符值：使用.prop，就像您取得值一樣。見this reference

來源

2017-05-12 18:33:57

是啊，我注意到所有其他的答案我可以舉槓鈴，但之後我點擊他們，我可以改變的答案，但它不會動吧進度條....請問你介意把你的想法變成一個jfiddle嗎？將不勝感激:) – Mitch

編輯添加jsfiddle –

是的，這就是它！非常感謝！！！我一直在爲此工作了3天，直接大聲笑。所以，如果我有超過2個下拉框，我只需添加另一個if語句與選擇3？ – Mitch

這是可能的。只需捕獲選項的值（儘管先將其轉換爲int）。

var doneA = false; 
 
$('#selectA').on('change', function() { 
 
    if (!doneA) { 
 
    var progressBarVal = parseInt($("#progressBar").val()); 
 
    var addVal = parseInt($(this).val()); 
 
    $("#progressBar").attr('value', + addVal); 
 
    doneA = true; 
 
    } 
 
}); 
 

 
var doneB = false; 
 
$('#selectB').on('change', function() { 
 
    if (!doneB) { 
 
    var progressBarVal = parseInt($("#progressBar").val()); 
 
    var addVal = parseInt($(this).val()); 
 
    $("#progressBar").attr('value', + addVal); 
 
    doneB = true; 
 
    } 
 
});

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

 
</body> 
 

 
</html>

來源

2017-05-12 18:33:59

您可以使用$（本）.VAL（）來找出所選值。

<!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')+$(this).val()); 
 
     doneA = true; 
 
    } 
 
}); 
 

 
var doneB = false; 
 
$('#selectB').on('change', function() { 
 
    if (!doneB) { 
 
     $("#progressBar").attr('value', $("#progressBar").prop('value')+$(this).val()); 
 
     doneB = true; 
 
    } 
 
}); 
 
    </script> 
 
</body> 
 
</html>

來源

2017-05-12 18:34:55 ivp

下拉框和進度條

回答

相關問題