Q&A
###趣味のゲームサイトです
https://dl.dropboxusercontent.com/u/22486942/bootstrap/index.html
###前提・実現したいこと
■セレクトボックス①
・昨日の天気は＊＊＊＊だね
・今日は＊＊＊＊だったね
・＊＊＊＊が続くといいね
■セレクトボックス②
・晴れ
・曇り
・雨
↑
セレクトボックス①＊＊＊＊の文字列部分をセレクトボックス②の文言に置換して出力したいです。
現状、セレクト①、セレクト②を混ぜて出力までは出来ている気がします。。。
アドバイス宜しくお願いします。
###ソースコード
<script language="javascript"> <!-- //出力定義やな function go() { myform.p1.value=document.myform.ft.value; myform.p2.value=document.myform.ft.value; } //条件分岐やな $(function(){ $('#form select[name="d1"]').change(function() { if ($('select[name="d1"] option:selected').val() == '****を恐れよ') $('#add_blc').css('display','block'); else if ($('select[name="d1"] option:selected').val() == '****を思い出せ') $('#add_blc').css('display','block'); else if ($('select[name="d1"] option:selected').val() == '****の時間だ') $('#add_blc').css('display','block'); else if ($('select[name="d1"] option:selected').val() == '****の病だ') $('#add_blc').css('display','block'); else if ($('select[name="d1"] option:selected').val() == '****の臭いがする') $('#add_blc').css('display','block'); else if ($('select[name="d1"] option:selected').val() == '****が有効だ') $('#add_blc').css('display','block'); else $('#add_blc').css('display','none'); }); $('select[name="d2"] , select[name="d3"], select[name="d4"] , select[name="d5"] , select[name="d6"] , select[name="d7"], select[name="d8"]').change(function s1(x1) { if ($('select[name="d2"] option:selected').val() == '人外') $(function () { $('#add_blc3').css('display','block') ; $('#add_blc4').css('display','none'); $('#add_blc5').css('display','none'); $('#add_blc6').css('display','none'); $('#add_blc7').css('display','none'); $('#add_blc8').css('display','none'); myform.p3.value= document.myform.d3.value+ document.myform.d1.value; }); else if ($('select[name="d2"] option:selected').val() == '人') $(function () { $('#add_blc3').css('display','none') ; $('#add_blc4').css('display','block'); $('#add_blc5').css('display','none'); $('#add_blc6').css('display','none'); $('#add_blc7').css('display','none'); $('#add_blc8').css('display','none'); myform.p3.value= document.myform.d4.value+ document.myform.d1.value; }); else if ($('select[name="d2"] option:selected').val() == '戦術A') $(function () { $('#add_blc3').css('display','none') ; $('#add_blc4').css('display','none'); $('#add_blc5').css('display','block'); $('#add_blc6').css('display','none'); $('#add_blc7').css('display','none'); $('#add_blc8').css('display','none'); myform.p3.value= document.myform.d5.value+ document.myform.d1.value; }); else if ($('select[name="d2"] option:selected').val() == '戦術B') $(function () { $('#add_blc3').css('display','none') ; $('#add_blc4').css('display','none'); $('#add_blc5').css('display','none'); $('#add_blc6').css('display','block'); $('#add_blc7').css('display','none'); $('#add_blc8').css('display','none'); myform.p3.value= document.myform.d6.value+ document.myform.d1.value; }); else if ($('select[name="d2"] option:selected').val() == '物/場所') $(function () { $('#add_blc3').css('display','none') ; $('#add_blc4').css('display','none'); $('#add_blc5').css('display','none'); $('#add_blc6').css('display','none'); $('#add_blc7').css('display','block'); $('#add_blc8').css('display','none'); myform.p3.value= document.myform.d7.value+ document.myform.d1.value; }); else if ($('select[name="d2"] option:selected').val() == '概念')$(function () { $('#add_blc3').css('display','none') ; $('#add_blc4').css('display','none'); $('#add_blc5').css('display','none'); $('#add_blc6').css('display','none'); $('#add_blc7').css('display','none'); $('#add_blc8').css('display','block'); myform.p3.value= document.myform.d8.value+ document.myform.d1.value; }); else $('#add_blc2').css('display','none'); }); }); // --> </script> <div class="panel panel-default"> <div class="panel-heading">手記ジェネレーター</div> <div class="panel-body"> <form name="myform"> <div id="form" class="form-group"> <select name="d1" onChange="s1(this.selectedindex)" class="form-control input-lg"> <option value="" >選択してね</option> <option value="****を恐れよ" >****を恐れよ</option> <option value="****を思い出せ" >****を思い出せ</option> <option value="****の時間だ" >****の時間だ</option> <option value="****の病だ" >****の病だ</option> <option value="****の臭いがする" >****の臭いがする</option> <option value="****が有効だ" >****が有効だ</option> </select> </div> <div id="add_blc" style="display:none;" class="form-group"> <select name="d2" onChange="s1(this.selectedindex)" class="form-control input-lg"> <option value="" >選択してね</option> <option value="人外" >人外</option> <option value="人" >人</option> <option value="戦術A" >戦術A</option> <option value="戦術B" >戦術B</option> <option value="物/場所" >物/場所</option> <option value="概念" >概念</option> </select> </div> <!--人外--> <div id="add_blc3" style="display:none;" class="form-group"> <select name="d3" onChange="s1(this.selectedindex)" class="form-control input-lg"> <option value="" >人外を選択してね</option> <option value="か" >か</option> <option value="き" >き</option> <option value="く" >く</option> <option value="け" >け</option> <option value="こ" >こ</option> </select> </div> <!--人--> <div id="add_blc4" style="display:none;" class="form-group"> <select name="d4" onChange="s1(this.selectedindex)" class="form-control input-lg"> <option value="" >人を選択してね</option> <option value="君" >君</option> <option value="僕" >僕</option> <option value="母" >母</option> <option value="父" >父</option> </select> </div> <!--戦術A--> <div id="add_blc5" style="display:none;" class="form-group"> <select name="d5" onChange="s1(this.selectedindex)" class="form-control input-lg"> <option value="" >戦術Aを選択してね</option> <option value="ち" >ち</option> <option value="ち" >ち</option> <option value="ち" >ち</option> <option value="ち" >ち</option> </select> </div> <!--戦術B--> <div id="add_blc6" style="display:none;" class="form-group"> <select name="d6" onChange="s1(this.selectedindex)" class="form-control input-lg"> <option value="" >戦術Bを選択してね</option> <option value="な" >な</option> <option value="な" >な</option> <option value="な" >な</option> <option value="な" >な</option> </select> </div> <!--物--> <div id="add_blc7" style="display:none;" class="form-group"> <select name="d7" onChange="s1(this.selectedindex)" class="form-control input-lg"> <option value="" >物を選択してね</option> <option value="りんご" >りんご</option> <option value="なす" >なす</option> <option value="すいか" >すいか</option> <option value="ねぎ" >ねぎ</option> </select> </div> <!--概念--> <div id="add_blc8" style="display:none;" class="form-group"> <select name="d8" onChange="s1(this.selectedindex)" class="form-control input-lg"> <option value="" >概念を選択してね</option> <option value="悲しい" >悲しい</option> <option value="楽しい" >楽しい</option> </select> </div> <div class="form-group"> <label class="control-label" for="usage1input1">出力結果</label> <input type="text" name="p3" class="form-control input-lg" id="result"> </div> </form> </div> </div>
Jquery selectの条件分岐と出力について
回答1件
0
ベストアンサー
html
1<!DOCTYPE HTML> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <form action=""> 9 10 <select name="" id="sentence"> 11 <option value="">----</option> 12 <option value="昨日の天気は＊＊＊＊だね">昨日の天気は＊＊＊＊だね</option> 13 <option value="今日は＊＊＊＊だったね">今日は＊＊＊＊だったね</option> 14 <option value="＊＊＊＊が続くといいね">＊＊＊＊が続くといいね</option> 15 </select> 16 17 <select name="" id="weather"> 18 <option value="">----</option> 19 <option value="晴れ">晴れ</option> 20 <option value="曇り">曇り</option> 21 <option value="雨">雨</option> 22 </select> 23 24 <textarea name="" id="result" cols="30" rows="10"></textarea> 25 </form> 26 27 <script src="//code.jquery.com/jquery-2.1.4.min.js"></script> 28 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 29 <script type="text/javascript"> 30 $(function () { 31 $("#sentence, #weather").on('change', function () { 32 var sentence = $("#sentence").val(); 33 var weather = $("#weather").val(); 34 var res = sentence.replace('＊＊＊＊', weather); 35 $('#result').val(res); 36 }); 37 }); 38 </script> 39 </body> 40</html>
投稿2016/01/05 16:00
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/01/06 03:24