有一個選擇菜單在另一個選擇菜單中選擇一個值與JQuery的移動

我想要有一個優先級下拉菜單更改另一個下拉菜單的值動態時，用戶選擇一個選項。我正在使用Jquery Mobile，不確定我會如何去做這件事。這是我的HTML目前。因此，如果我選擇優先級別正常，我希望在commETA和compETA選擇框中選擇48小時。預先感謝任何幫助！有一個選擇菜單在另一個選擇菜單中選擇一個值與JQuery的移動

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>Login</title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <!-- Bootstrap --> 
 
    <link rel="stylesheet" href="../css/themes/Estimates.css" /> 
 
\t <link rel="stylesheet" href="../css/themes/jquery.mobile.icons.min.css" /> 
 
\t <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" /> 
 
\t <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
 
\t <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <div data-role="page" data-theme="a"> 
 
\t \t <div data-role="header" data-position="inline"> 
 
\t \t \t <h1>MGK Electric CTA</h1> 
 
\t \t </div> 
 
\t \t <div data-role="content" data-theme="a"> 
 
     \t \t <form class="form-signin" id="form1" method="post" action="<?php echo $formaction; ?>"> 
 
     \t \t <h4 class="form-signin-heading" style="text-align: center;">Please describe CTA Below</h4> 
 
     \t \t <label style="font-weight: bold;">Customer Name:</label> 
 
     \t \t <input name="Customer_Name" id="Customer_Name" type="text" class="form-control" autofocus required="required"><br /> 
 
     \t \t <label style="font-weight: bold;">Priority Level:</label> \t 
 
     \t \t \t <select name="Priority" id="Priority" required="required"> 
 
     \t \t \t <option value="">Please Select</option> 
 
     \t \t \t <option value="Normal">Normal</option> 
 
     \t \t \t <option value="High">High</option> 
 
     \t \t \t <option value="Severe">Severe</option> 
 
     \t \t \t <option value="Emergency">Emergency</option> 
 
     \t \t </select><br /> 
 
     \t \t <label style="font-weight: bold;">Project:</label> 
 
     \t \t <input name="Project" id="Project" type="text" class="form-control"><br /> 
 
     \t \t <label style="font-weight: bold;">Expected Time for Communication:</label> 
 
     \t \t <select name="commETA" id="commETA" required="required"> 
 
     \t \t \t <option value="">Please Select</option> 
 
     \t \t \t <option value="Today">Today</option> 
 
     \t \t \t <option value="48 Hours">48 Hours</option> 
 
     \t \t \t <option value="1 Week">1 Week</option> 
 
     \t \t \t <option value="2 Weeks">2 Weeks</option> 
 
     \t \t </select><br /> 
 
     \t \t <label style="font-weight: bold;">Expected Time for Completion:</label> 
 
     \t \t <select name="compETA" id="compETA" required="required"> 
 
     \t \t \t <option value="">Please Select</option> 
 
     \t \t \t <option value="Today">Today</option> 
 
     \t \t \t <option value="48 Hours">48 Hours</option> 
 
     \t \t \t <option value="1 Week">1 Week</option> 
 
     \t \t \t <option value="2 Weeks">2 Weeks</option> 
 
     \t \t \t <option value="1 Month">1 Month</option> 
 
     \t \t \t <option value="Unknown">Unknown</option> 
 
     \t \t </select><br /> 
 
     \t \t <label style="font-weight: bold;">Description of Issue:</label> 
 
     \t \t <textarea name="issue" id="issue" required="required"></textarea><br /> 
 
     \t \t <label style="font-weight: bold;">Unknowns About Issue:</label> 
 
     \t \t <textarea name="unknowns" id="unknowns" required="required"></textarea><br /> 
 
     \t \t <label style="font-weight: bold;">People Invoved in CTA:</label> 
 
     \t \t <textarea name="people" id="people" required="required"></textarea> 
 
     \t \t <br /><br /> 
 
     \t \t <input type="hidden" name="doform" value="doform"> 
 
     \t \t <button name="Submit" id="submit" class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> 
 

 
     \t \t <div id="message"></div> 
 
     \t \t </form> 
 

 
    \t </div> 
 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
 
    <script type="text/javascript" src="login/js/bootstrap.js"></script> 
 
    </body> 
 
</html>

來源

2017-06-14 Mark Lordi

下面是一個例子：

$(document).on("pagecreate", "#page-form1", function() { 
 
    $("select").each(function(idx) { 
 
    $(this).change(function() { 
 
     var value = $(this).val(); 
 
     //$(this).children("option").removeAttr("selected").find("[value='" + value + "']").attr("selected", "selected"); 
 
     if($(this).attr("id") == "Priority") 
 
     linkOptions(value); 
 
    }); 
 
    }); 
 
}); 
 

 
function linkOptions(priority) { 
 
    var cases = { 
 
    "Severe": { 
 
     "commETA": "Today", 
 
     "compETA": "Today" 
 
    }, 
 
    "Normal": { 
 
     "commETA": "48 Hours", 
 
     "compETA": "48 Hours" 
 
    } 
 
    }; 
 

 
    if (cases[priority]) { 
 
    $.each(cases[priority], function(key, value) { 
 
     $("#" + key).val(value).trigger("change"); 
 
    }); 
 
    } 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Login</title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> 
 
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
 
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 
</head> 
 
<body> 
 
    <div data-role="page" id="page-form1" data-theme="a"> 
 
    <div data-role="header"> 
 
     <h1>MGK Electric CTA</h1> 
 
    </div> 
 
    <div data-role="content" data-theme="a"> 
 
     <form class="form-signin" id="form1" method="post" action="<?php echo $formaction; ?>"> 
 
     <h4 class="form-signin-heading" style="text-align: center;">Please describe CTA Below</h4> 
 
     <label for="Customer_Name">Customer Name:</label> 
 
     <input name="Customer_Name" id="Customer_Name" type="text" class="form-control" autofocus required="required"> 
 
     <br> 
 
     <label for="Priority">Priority Level:</label> 
 
     <select name="Priority" id="Priority" required="required"> 
 
      <option value="" selected="selected">Please Select</option> 
 
      <option value="Normal">Normal</option> 
 
      <option value="High">High</option> 
 
      <option value="Severe">Severe</option> 
 
      <option value="Emergency">Emergency</option> 
 
     </select> 
 
     <br> 
 
     <label for="Project">Project:</label> 
 
     <input name="Project" id="Project" type="text" class="form-control"> 
 
     <br /> 
 
     <label for="commETA">Expected Time for Communication:</label> 
 
     <select name="commETA" id="commETA" required="required"> 
 
      <option value="" selected="selected">Please Select</option> 
 
      <option value="Today">Today</option> 
 
      <option value="48 Hours">48 Hours</option> 
 
      <option value="1 Week">1 Week</option> 
 
      <option value="2 Weeks">2 Weeks</option> 
 
     </select> 
 
     <br> 
 
     <label for="compETA">Expected Time for Completion:</label> 
 
     <select name="compETA" id="compETA" required="required"> 
 
      <option value="" selected="selected">Please Select</option> 
 
      <option value="Today">Today</option> 
 
      <option value="48 Hours">48 Hours</option> 
 
      <option value="1 Week">1 Week</option> 
 
      <option value="2 Weeks">2 Weeks</option> 
 
      <option value="1 Month">1 Month</option> 
 
      <option value="Unknown">Unknown</option> 
 
     </select> 
 
     <br> 
 
     <label for="issue">Description of Issue:</label> 
 
     <textarea name="issue" id="issue" required="required"></textarea> 
 
     <br> 
 
     <label for="unknowns">Unknowns About Issue:</label> 
 
     <textarea name="unknowns" id="unknowns" required="required"></textarea> 
 
     <br> 
 
     <label for="people">People Invoved in CTA:</label> 
 
     <textarea name="people" id="people" required="required"></textarea> 
 
     <br> 
 
     <br> 
 
     <input type="hidden" name="doform" value="doform"> 
 
     <button name="Submit" id="submit" class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> 
 
     <div id="message"></div> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

編輯：爲奧馬爾的評論說，val()應該只是罰款 - 正確過濾器是:selected：

$("select").each(function(idx) { 
    var selectedValue = $(this).find("option").filter(":selected").attr("value"); 
});

EDIT2：初始selected屬性

來源

2017-06-15 12:36:17 deblocker

感謝那些完美。我將如何去添加優先級的多個實例。（即如果我選擇嚴重，它應該今天在commETA和compETA中選擇？）再次感謝！ –

案例對象已經計劃在所有不同的優先級別擴展，但我不確定要理解「實例」的含義... – deblocker

您的示例實際上向我展示了您是如何做到的。我錯過了，之後}。再次感謝deblocker！ –

有一個選擇菜單在另一個選擇菜單中選擇一個值與JQuery的移動

回答

相關問題