選択メニューにJquery Mobileを使用して別の選択メニューの値を選択してください

ユーザがオプションを選択したときに、別のドロップダウンメニューの値を動的に変更しようとしています。私はJquery Mobileを使用していますが、これを実現させる方法についてはわかりません。ここに私のHTMLがあります。ですから、もし私が優先レベルをNormalに設定したら、CommETAとcompETAの選択ボックスで48時間を選択したいと思います。助けをあらかじめありがとう！ここで選択メニューにJquery Mobileを使用して別の選択メニューの値を選択してください

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

EDIT：オマールはval()がうまく動作するはずです、コメントで言ったように - 正しいをフィルタはです：

$("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

あなたの例では、私は、}の後に行方不明だった。ありがとうございました！ –

選択メニューにJquery Mobileを使用して別の選択メニューの値を選択してください

答えて

関連する問題