プルダウンの初期値を選択時には、除外する方法

Question

<select id="changeSelect" onchange="entryChange2(),changeItem(this),imgChange(this);">
 <option value="">2013年以前</option>
 <option value="select2013">2013年</option>
 <option value="select2012">2012年</option>
 <option value="select2011">2011年</option>
</select>

初期表示のみ「2013年以前」を表示しておいて、プルダウンを押して選択するときに「2013」・「2012」・「2011」のみ選択可能にしたいです。

PCのみでは稼動ができるようにしたのですが･･･iPhoneでは上手く稼動せず断念しました。

iPhoneでも、初期表示値と選択値を変えることは可能でしょうか？

宜しくお願いいたします。

＊追記＊
entryChange2()では、2013年を選択したときに、他の年のデータを表示にしています。

function entryChange2(){
//プルダウンを選択されたときに、Class「on」を削除
$('.on').removeClass();

	//プルダウン押下時：変更処理
	if(document.getElementById('changeSelect')){
		id = document.getElementById('changeSelect').value;
		
		if(id == 'select2013'){
			//2013年表示
			document.getElementById('Box2017').style.display = "none";
			document.getElementById('Box2016').style.display = "none";
			document.getElementById('Box2015').style.display = "none";
			document.getElementById('Box2014').style.display = "none";
			document.getElementById('Box2013').style.display = "";
			document.getElementById('Box2012').style.display = "none";
			document.getElementById('Box2011').style.display = "none";
		}else if(id == 'select2012'){
			//2012年表示
			document.getElementById('Box2017').style.display = "none";
			document.getElementById('Box2016').style.display = "none";
			document.getElementById('Box2015').style.display = "none";
			document.getElementById('Box2014').style.display = "none";
			document.getElementById('Box2013').style.display = "none";
			document.getElementById('Box2012').style.display = "";
			document.getElementById('Box2011').style.display = "none";
		}else if(id == 'select2011'){
			//2011年表示
			document.getElementById('Box2017').style.display = "none";
			document.getElementById('Box2016').style.display = "none";
			document.getElementById('Box2015').style.display = "none";
			document.getElementById('Box2014').style.display = "none";
			document.getElementById('Box2013').style.display = "none";
			document.getElementById('Box2012').style.display = "none";
			document.getElementById('Box2011').style.display = "";
		}
	}
}

changeItem(this)では、選択後にプルダウンの中フォントや枠組みのcssを変更しています。

    if( obj.value == ""){
        obj.style.border = '1px solid #003a62'; 
        obj.style.fontWeight = "bold";
        obj.style.fontSize = "107.14%";
    }else{ 
        obj.style.border = '1px solid #003a62'; 
        obj.style.fontWeight = "bold";
        obj.style.fontSize = "107.14%";
    }
}

imgChange(this);では、選択後画像プルダウンに付随している画像の切替をしています。

function imgChange(parts){
	fname=parts.options[parts.selectedIndex].value;
	
	if(fname==0){document.imgsmp.src=img0.src;} //横矢印
	if(fname =="select2013"){document.imgsmp.src=img1.src;} //下矢印
	if(fname =="select2012"){document.imgsmp.src=img1.src;} //下矢印
	if(fname =="select2011"){document.imgsmp.src=img1.src;} //下矢印
}

Comments

[x_x]

onchangeでは何をしているのでしょうか？

[x_x]

PCで「のみ選択可能」にしているところはどこですか？

[daiti916]

cssでレシポンシブにしているので、同じ画面をPCとSPで見ると、表示形式が変わるようにしています。

[x_x]

どういうことでしょうか？　PCでは「2013年以前」が選択できるのですか？

[daiti916]

PCでもSPでも、「2013年以前」が選択時に表示されてしまっていいるので･･･選択時にPC・SP両方とも「2013年以前」を非表示にしたい。です。

[x_x]

では、「PCのみでは稼動ができるようにしたのですが」というのはいったいどのコードを指していますか？

[daiti916]

その部分は、ややこしくなる為･･･消してしまいました。申し訳ありません。

Answer 1

<option value="02" disabled="" selected="">2013年以前</option> でおっしゃっている動きにはなるのかなぁと思いますが、 選択したくない、未選択にしたい、ということは二度とできなくなります。 動きとしてあまり見たことがないのかなぁと思います。

普通に2013年以前も選択することが可能にしておいて
アクション時に必須チェックを入れるのが自然なUIの動きだと思います。

Comments

[daiti916]

初期表示に「2013年以前」を表示しておりまして、プルダウンをクリックして開くと、「2013年以前」は非表示の状態で「2013」・「2012」・「2011」のみ表示することはできないということですかね・・・？

[ms5025]

できないというより、不思議な動きだなぁと思います。
removeして強引に・・などはおすすめしません
ほかの誰かが見たときに「これ何してんの？」というやり取りが
必ず発生するからです。

ユーザに明示的に選択させる意味でも、初回から2013年を選択しておくのは
あまりいい作りではありません。
よって<option value="">2013年以前</option>
は必要だと思います。

やはりフォーカスアウトやsubmit時にvalidateなどで必須チェックを入れるほうが私は美しい作りだと思いますが。

[daiti916]

ありがとうございます。

これで大丈夫そうでしたので、ベストアンサーにさせていただきます。
お忙しいところ、誠にありがとうございました。

Answer 2

onchangeの処理が不明なのでなんともですが例えば以下のような形とか。

//プルダウンがクリックされた時にvalueが""の要素(=2013年以前)を選択不可にする
$("#changeSelect").on('click',function(){
  $('#changeSelect option[value=""]').prop('disabled','disabled');
})

追記
ちょっと調べてみたらこんなのもあるみたいです。

<select id="changeSelect">
 <option value="" selected hidden>2013年以前</option>
 <option value="select2013">2013年</option>
 <option value="select2012">2012年</option>
 <option value="select2011">2011年</option>
</select>

ブラウザの種類やバージョン(特に古いブラウザ)によってはうまいこといかないみたいですが…。

Comments

[daiti916]

選択時は「2013年以前」を表示されないようにしたいです・・・。

[madoka9393]

であれば少々乱暴ですが非表示…ではなく削除してしまうとか。
$('#changeSelect option[value=""]').remove();

[daiti916]

エラーが起きてしまって、正常に機能しない模様です・・！

[madoka9393]

全容が見えない(onchangeに指定されているスクリプトの中身がわからない)のでなんともですが、
恐らくremoveをしたことでその何れかに影響が出ているのかもしれませんね…。
スクリプトの中身まで含めて質問文に追記してあげるとより回答がしやすくなるかもしれません。

[daiti916]

selected hiddenを試してみたのですが、PC、SPともに機能していませんでした・・・

Answer 3

entryChange2(),changeItem(),imgChange()の仕様がわからないのでなんともいえませんが
たとえばこう？

<select onFocus="this.options[0].disabled=true">
 <option value="">2013年以前</option>
 <option value="select2013">2013年</option>
 <option value="select2012">2012年</option>
 <option value="select2011">2011年</option>
</select>

Comments

[daiti916]

選択時は「2013年以前」を表示されないようにしたいです！

また上記を試したところ、PCでは上手くいくのですが、iPhoneからですと、選択できてしまいました・・・