|
▽text値変更サンプル
※value値は数字の部分です
・text値-変更前の値（OLD)
・text値-変更後の値（NEW)
|
|
▽option追加削除サンプル
※value値は数字の部分です
・option追加 - value値
・option追加 - text値
・option追加/削除 -
追加/削除位置の値
value値 text値
|
【操作方法 - ❶text値変更】
●text値変更-変更text値選択
- セレクトボックス（text値変更サンプル）で変更したいtext値を選択します
- テキストボックス（text値-変更後の値（NEW)）に、変更後のtext値を入力します
- 変更text値選択ボタンをクリックします
- セレクトボックスで確認してください
●text値変更-変更text値入力
- テキストボックス（text値-変更前の値（OLD)）に、で変更したいtext値を入力します
- テキストボックス（text値-変更後の値（NEW)）に、変更後のtext値を入力します
- 変更text値入力ボタンをクリックします
- セレクトボックスで確認してください
【操作方法 - ❸option削除】
●option削除-選択
- セレクトボックス（option追加削除サンプル）で削除したいtext値を選択します
- 選択ボタンをクリックします
- セレクトボックスで、削除されていることを確認してください
●option削除-value/text値入力
- テキストボックス（option削除 - 追加/削除位置の値）に、削除したい value値またはtext値を入力します
- ラジオボタンで、上1.の値が、value値かtext値かを選択します
- value/text値入力ボタンをクリックします
- セレクトボックス（option追加削除サンプル）で、削除されていることを確認してください
【HTML/javascriptソースコード - ❶text値変更】
<script>
//Text値変更
function textChange(obj,p){
var newval = obj.newtext.value; // 新しい値（入力）
if(p == 2){
var oldval = obj.oldtext.value; // 現在値は入力値
$('select#textchange option:contains(' + oldval + ')').text(newval);
}
else{ // 現在値は選択された値
$("#textchange").find("option:selected").text(newval);
}
}
</script>
<body>
<form>
▽text値変更サンプル
<select name="textchange" size=10 style="width:150px" id="textchange">
<option value="1">text1</option>
......
<option value="20">text20</option>
</select>
・text値-変更前の値<small>（OLD)</small><br>
<input type=text name=oldtext value="" title="変更前"><br>
・text値-変更後の値<small>（NEW)</small><br>
<input type=text name=newtext value="" title="変更後"><br>
<input type=button value="text値変更１" id="textUpButton1" onclick="textChange(this.form,1);" title="選択されたOPTIONを変更">
<input type=button value="text値変更２" id="textUpButton2" onclick="textChange(this.form,2);" title="入力したTEXT値のOPTIONを変更">
</form>
【HTML/javascriptソースコード - ❸option削除】
<script>
//Option削除(1) 選択されたvalue値で削除
function optionDel(obj){
var targetval = $('#optionadddel').val(); //選択のvalue値
$('select#optionadddel option[value=' + targetval + ']').remove();
}
//Option削除(2) 入力のvalue/text値で削除
function optionDelVal(obj){
var targetval = obj.deloptionval.value; //value/textの値
var target = $('input[name="valortxt"]:checked').val(); //value/textの区別
if(target == "val"){ //value値
$('select#optionadddel option[value=' + targetval + ']').remove();
}
if(target == "txt"){ //text値
$("#optionadddel option").each( function(){
if($(this).text() == targetval) {
$(this).remove();
}
});
}
}
</script>
<body>
<form>
▽option追加削除サンプル<br>
<select name="optionadddel" id="optionadddel" size=10 style="width:150px">
<option value="2002">2002年</option>
.....
<option value="2020">2020年五輪</option>
</select>
❸option削除：<input type=button value="選 択" id="optDelButton" onclick="optionDel(this.form,1);" title="選択されたOPTIONを削除" style="margin-top:5px">
<input type=button value="value/text値入力" id="optDelButtonV" onclick="optionDelVal(this.form);" title="入力したvalue値のOPTIONを削除" style="margin-top:5px">
<input type=button onclick="document.f.reset()" value="リセット" style="margin-top:5px">
</form>
| |
【操作方法 - ❷option追加】
●option追加-先頭
- テキストボックス（option追加 - value値）に、追加するoptionのvalue値を入力します
- テキストボックス（option追加 - text値）に、追加するoptionのtext値を入力します
- 先頭ボタンをクリックします
- セレクトボックス（option追加削除サンプル）で、メニューの先頭に追加されているかを確認してください
●option追加-追加位置選択
- テキストボックス（option追加 - value値）に、追加するoptionのvalue値を入力します
- テキストボックス（option追加 - text値）に、追加するoptionのtext値を入力します
- セレクトボックス（option追加削除サンプル）で、追加したい位置を選択します
- 追加位置選択ボタンをクリックします
- セレクトボックス（option追加削除サンプル）で選択した位置の下に追加されていることを確認してください
●option追加-追加位置入力
- テキストボックス（option追加 - value値）に、追加するoptionのvalue値を入力します
- テキストボックス（option追加 - text値）に、追加するoptionのtext値を入力します
- テキストボックス（option追加 - 追加/削除位置の値）に、追加したい位置のvalue値またはtext値を入力します
- ラジオボタンで、上3.の値が、value値かtext値かを選択します
- 追加位置入力ボタンをクリックします
- セレクトボックス（option追加削除サンプル）で、上3.で入力した値の後に追加されているかを確認してください
●option追加-最終
- テキストボックス（option追加 - value値）に、追加するoptionのvalue値を入力します
- テキストボックス（option追加 - text値）に、追加するoptionのtext値を入力します
- 最終ボタンをクリックします
- セレクトボックス（option追加削除サンプル）で、メニューの最後に追加されているかを確認してください
【HTML/javascriptソースコード - ❷option追加】
<script>
//Option追加(1) 先頭
function optionAddTop(obj){
var oval = obj.optionvalue.value; //追加のvalue
var otxt = obj.optiontext.value; //追加のtext
$('#optionadddel').prepend($('<option>').html(otxt).val(oval));
}
// Option追加(2)選択のtext値の要素の後に追加する場合
function optionAddAfter1(obj){
var oval = obj.optionvalue.value; //追加のvalue
var otxt = obj.optiontext.value; //追加のtext
var targetval = $('#optionadddel').val(); //選択のvalue値
$("#optionadddel option[value='" + targetval + "']").after($("<option>").val(oval).text(otxt));
}
// Option追加(3)入力のvalue値="xxxxx"の要素の後に追加する場合
function optionAddAfter2(obj){
var oval = obj.optionvalue.value; //追加のvalue
var otxt = obj.optiontext.value; //追加のtext
var target = $('input[name="valortxt"]:checked').val(); //value/textの区別
var targetval = obj.deloptionval.value; //value/textの値
if(target == "val"){ //value値
$("#optionadddel option[value='" + targetval + "']").after($("<option>").val(oval).text(otxt));
}
else{ //text値
$("#optionadddel option").each( function(){
if($(this).text() == targetval) {
var targetval2 = $(this).val(); //value値
$("#optionadddel option[value='" + targetval2 + "']").after($("<option>").val(oval).text(otxt));
}
});
}
}
//Option追加(4) 末尾
function optionAddLast(obj){
var oval = obj.optionvalue.value; //追加のvalue
var otxt = obj.optiontext.value; //追加のtext
$('#optionadddel').append($('<option>').html(otxt).val(oval));
}
</script>
<body>
<form>
▽option追加削除サンプル<br>
<select name="optionadddel" id="optionadddel" size=10 style="width:150px">
<option value="2002">2002年</option>
.....
<option value="2020">2020年五輪</option>
</select>
❷option追加：<input type=button value="先頭" id="optAddButtonT" onclick="optionAddTop(this.form);">
<input type=button value="追加位置選択" id="optAddButton1" onclick="optionAddAfter1(this.form);">
<input type=button value="追加位置入力" id="optAddButton2" onclick="optionAddAfter2(this.form);">
<input type=button value="最終" id="optAddButtonL" onclick="optionAddLast(this.form);">
</form>
|
