『忠犬もちしば』のAIを育てるとグッズが貰える!>>

下記のようなJSで、たとえば「ううう」を選択すると、
「ううう」を選択する前に戻すには、どうすればいいでしょうか?


<script>
function test(value) {
  if (value == "u") {
    alert("「ううう」を選択することはできません");
    //ここ↓をどう書けばいいですか?
  }
}
</script>

<select name="test" id="test" onchange="test(this.value);">
<option value="a">あああ</option>
<option value="i">いいい</option>
<option value="u">ううう</option>
<option value="e">えええ</option>
<option value="o">おおお</option>
</select>


例)
・「いいい」を選択
  ↓
・「ううう」を選択
  ↓
・「ううう」を選択することはできません、とアラートを出す。
  ↓
・「いいい」の選択に戻る

A 回答 (5件)

こんばんは



こんなやり方は、如何でしょう?
<HTML>
<BODY>
<script>
var predata = "a";

function test(value) {
  if (value == "u") {
    alert("「ううう」を選択することはできません");
    //ここ↓をどう書けばいいですか?
testsel.value = predata;
return;
  }
predata = value;
}
</script>

<select name="test" id="testsel" onchange="test(testsel.value);">
<option value="a">あああ</option>
<option value="i">いいい</option>
<option value="u">ううう</option>
<option value="e">えええ</option>
<option value="o">おおお</option>
</select>
</BODY>
</HTML>
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。

こちらがいちばんシンプルなやり方のようですね。
こちらの方法を採用させていただきます。

実は、↓のような例で、偽を返すと、アクションを起こさないのと同様に、
<a href="test.html" onclick="alert(1); return false;">test</a>
簡単にできないかと思ってたのですが、皆さんの回答をみる限りでは
出来ないようですね。

ありがとうございました。

お礼日時:2008/11/01 23:45

ちと待ってくれ。


質問者は
>たとえば「ううう」を選択すると
と言っている。この”たとえば”とは
一度選択したら、変更されても元に戻して変更できないようにする!
と解釈するのでは?

まぁ~無言を続けている限り真実はわからないが・・・
    • good
    • 0

こんにちは!


スマートな書き方ではないかもしれませんが、以下のような方法はいかが
でしょうか?

<script>
log_val="";
function test(value) {
  if (value == "u") {
    alert("「ううう」を選択することはできません");
document.getElementById('test').value = log_val;
  }else{
log_val =value;
  }
}

function log(value){
log_val=value;
}
</script>

<select name="test" id="test" onchange="test(this.value);" onfocus="log(this.value);">
<option value="a">あああ</option>
<option value="i">いいい</option>
<option value="u">ううう</option>
<option value="e">えええ</option>
<option value="o">おおお</option>
</select>

流れonfocusイベント時に現在選択されている値を取得し、保存しておく
選択されたくない項目が選択された時、警告メッセージを表示し、元の値に変更
選択されても良い値が選択された時、選択された値を取得し、保存しておく

参考になれば幸いです!
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。

ANo.2さんの回答と同様に、やはり、一度変数にバックアップしておく
方法ですね。onfocusを使うという発想は思い浮かびませんでした。

今回は、ANo.2さんのやり方でいきますが、参考になりました。
ありがとうございました。

※JavaScriptって発想が大事なんですね~。なるほど。

お礼日時:2008/11/01 23:51

<html>


<select name="test" id="test" onchange="this.disabled=true;">
<option value="a">あああ</option>
<option value="i">いいい</option>
<option value="u">ううう</option>
<option value="e">えええ</option>
<option value="o">おおお</option>
</select>
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。

質問が不明確であったようで、失礼しました。

たとえば「ううう」を選択すると
 ↓
「ううう」を選択すると

「たとえば」という言葉は要らなかったですね。。

とはいえ、ご回答いただき、ありがとうございました。

お礼日時:2008/11/01 23:47

<script type="text/javascript"><!--


function tests(value) {
if (value == "u") {
alert("「ううう」を選択することはできません");
form.test.value=form.hako.value;
}else{
form.hako.value=form.test.value;
}
}
-->
</script>


<form name="form">
<input type="hidden" id="hako" value="a"> </input>
<select name="test" id="test" onchange="tests(this.value);">
<option value="a" selected>あああ</option>
<option value="i">いいい</option>
<option value="u">ううう</option>
<option value="e">えええ</option>
<option value="o">おおお</option>
</select>

先ほど送信したのですが、うまくいっていなかったようなので、もう一度。ダブったらごめんなさい。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。

hiddenに保持しておくのですね。

ありがとうございました。

お礼日時:2008/11/01 23:40

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QJavaScriptで変更した属性の元の値の取得

いつもお世話になっております。

ページの画像をとある条件で変更しようとしております。
HTML5のdata-を利用して変更後の画像のパスをimg要素内に持たせております。
JavaScriptでimg要素を取得し画像の変更は実現できております。
その後もとの画像に戻したいのですが、JavaScriptでimg要素を取得してもsrc属性が変更後の値になっており変更前の値が取得できません。
変更前の値の取得方法を教えてください。

■HTMLソースの一部
<p><img src="img/moto.gif" alt="" data-mimage="img/ato.gif"></p>

■JavaScriptの一部
function wid(){
var image=document.getElementsByTagName('img');
if(window.innerWidth>=320){
for(var i=0;i<image.length;i++){
image.item(i).src=image.item(i).getAttribute("data-mimage");
}
}else{
// ここに元の画像に戻すためのスクリプトを書きたい
}
}
}
wid関数を作ってそのなかでimg要素を取得し、条件を満たしたらすべてのimg要素のdata-mimageの属性値を元のsrc属性に上書きします。
次に条件が満たされていない場合はHTMLにもともと書いてあったsrc属性の属性値をsrc属性値に戻したいのですがこの値が取得できません。

img/moto.gifをimg/ato.gifに変更することは出来ます。
img/ato.gifに変更した後img/moto.gifに戻すことが出来ません。

もちろんdata-mimage2="img/moto.gif"を追加すれば可能なのは分かっていますが、現状のHTMLを変更することなく実現したいです。

よろしくお願いします。

いつもお世話になっております。

ページの画像をとある条件で変更しようとしております。
HTML5のdata-を利用して変更後の画像のパスをimg要素内に持たせております。
JavaScriptでimg要素を取得し画像の変更は実現できております。
その後もとの画像に戻したいのですが、JavaScriptでimg要素を取得してもsrc属性が変更後の値になっており変更前の値が取得できません。
変更前の値の取得方法を教えてください。

■HTMLソースの一部
<p><img src="img/moto.gif" alt="" data-mimage="img/ato.gif"></p>

■JavaScri...続きを読む

Aベストアンサー

回答No.1のt_ohta様のおっしゃるとおり、

>書き換えてしまったものは取得できません。

ので、

>JavaScriptの変数に残しておくか、書き換える前にJavaScriptで別の属性を作って書き残しておきましょう。

の通り、別途属性を作ってパスを保持しておくのが良いかと思います。

_rakuda_ のサンプルを少し修正させてもらいまして、
下記のような形はいかがでしょうか・・・?

function wid(){
var image=document.getElementsByTagName('img');
if( window.innerWidth>=320 ){
for(var i=0;i<image.length;i++){

// data-prev-imgがない場合、srcの値を data-prev-img に挿入する
if (!image.item(i).getAttribute("data-prev-img")) {
image.item(i).setAttribute('data-prev-img', image.item(i).getAttribute("src"));
}

image.item(i).src=image.item(i).getAttribute("data-mimage");

}
} else {
// ここに元の画像に戻すためのスクリプトを書きたい
// data-prev-imgの値をsrcに挿入する
image.item(i).src=image.item(i).getAttribute("data-prev-img");
}
}

上記の形だと、関数実行時にしか data-prev-img が作られませんので、
data-prev-imgが無い状態で else のほうに入ってきてしまうとエラーが出てしまうので、
onload時などページの読み込みが終わったタイミングで、
data-prev-img の設定を先にしてしまうのが処理の流れ的には良いかもしれないですね。

ご参考になれば幸いです。

回答No.1のt_ohta様のおっしゃるとおり、

>書き換えてしまったものは取得できません。

ので、

>JavaScriptの変数に残しておくか、書き換える前にJavaScriptで別の属性を作って書き残しておきましょう。

の通り、別途属性を作ってパスを保持しておくのが良いかと思います。

_rakuda_ のサンプルを少し修正させてもらいまして、
下記のような形はいかがでしょうか・・・?

function wid(){
var image=document.getElementsByTagName('img');
if( window.innerWidth>=320 ){
for(var i=0;i<image.len...続きを読む

Qjavascriptでセレクトボックスの"selected"を動的につ

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
</select>月

<select name='day'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
<option value='13'>13</option>
<option value='14'>14</option>
<option value='15'>15</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
<option value='20'>20</option>
<option value='21'>21</option>
<option value='22'>22</option>
<option value='23'>23</option>
<option value='24'>24</option>
<option value='25'>25</option>
<option value='26'>26</option>
<option value='27'>27</option>
<option value='28'>28</option>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日


このセレクトボックスに、例えば今日の日付"2010年9月30日"だったら、それぞれの年、月、日の<option>に"selected"をつけたいのですが、javascriptではどのようにして実現したら良いのでしょうか?

よろしくお願いします。

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8...続きを読む

Aベストアンサー

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<option value='2009'>2009</option>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
</select>月

<select name='day'>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日
</div>
</form>

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<opt...続きを読む

Q全てのselect要素をデフォルトの値に戻す方法

ページを開いたときは、全てのselect部分ではデフォルトが表示されます。
選択後にブラウザを更新させずに、全てをデフォルトに戻すためには
どのようにしたらよいのでしょうか。
html側でselected="selected"とする方法がありますが、
ブラウザによって対応していなかったりしたので、他に確実な方法を知りたいです。
よろしくお願いします。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>全てのselectをデフォルトにする</title>
</head>
<body>
<form>
<select name="s0" onclick="f(this.form)">
<option value="デフォルト" selected="selected">デフォルト</option>
<option value="A">A</option>
<option value="B">B</option>
</select>
<select name="s1" onclick="f(this.form)">
<option value="デフォルト" selected="selected">デフォルト</option>
<option value="あ">あ</option>
<option value="い">い</option>
</select>
<select name="s2" onclick="f(this.form)">
<option value="デフォルト" selected="selected">デフォルト</option>
<option value="a">a</option>
<option value="b">b</option>
</select>
</form>

<script>
function f(fff){
var aaa = []
var fel;
var sl = document.getElementsByTagName('select').length;
for(i=0; i<sl; i++){
fel = fff.elements["s"+i];
//デフォルトかそうでないかをdefaultSelectedで判断
aaa[i] = fel.options[fel.selectedIndex].defaultSelected;
if( aaa[i] == false ){
//false(=デフォルトでない)場合はデフォルトに戻す
aaa[i] = true;
}
//戻り値をかえして全てをデフォルトにする
return aaa[i];
}
}
</script>
</body>
</html>

ページを開いたときは、全てのselect部分ではデフォルトが表示されます。
選択後にブラウザを更新させずに、全てをデフォルトに戻すためには
どのようにしたらよいのでしょうか。
html側でselected="selected"とする方法がありますが、
ブラウザによって対応していなかったりしたので、他に確実な方法を知りたいです。
よろしくお願いします。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type...続きを読む

Aベストアンサー

まずデフォルトとはなにかという定義が必要
たんに各セレクトボックスの最初のoptionであれば
selectedIndexを0にするだけ。

<form>
<select name="s0" onclick="f(this)">
<option value="デフォルト" selected="selected">デフォルト</option>
<option value="A">A</option>
<option value="B">B</option>
</select>
<select name="s1" onclick="f(this)">
<option value="デフォルト" selected="selected">デフォルト</option>
<option value="あ">あ</option>
<option value="い">い</option>
</select>
<select name="s2" onclick="f(this)">
<option value="デフォルト" selected="selected">デフォルト</option>
<option value="a">a</option>
<option value="b">b</option>
</select>
</form>

<script>
function f(obj){
var f=obj.form;
for(var i=0; i<f.length; i++){
if(f[i].type=="select-one" && f[i]!=obj) f[i].selectedIndex=0;
}
}
</script>

まずデフォルトとはなにかという定義が必要
たんに各セレクトボックスの最初のoptionであれば
selectedIndexを0にするだけ。

<form>
<select name="s0" onclick="f(this)">
<option value="デフォルト" selected="selected">デフォルト</option>
<option value="A">A</option>
<option value="B">B</option>
</select>
<select name="s1" onclick="f(this)">
<option value="デフォルト" selected="selected">デフォルト</option>
<option value="あ">あ</option>
<option value="い">い</option>
</select>
<sel...続きを読む

Q