Skip to main content
Communityユーザーがトップに表示した
Communityユーザーがトップに表示した
Communityユーザーがトップに表示した
Communityユーザーがトップに表示した
Communityユーザーがトップに表示した
本文から 6 文字削除
ソース リンク
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>車と色の選択</TITLE>

<STYLE type="text/css">
<!--
BODY {
  border-top: 2px #FF0000 solid;
  text-align: center;
  color: #000000;
}
-->
</STYLE>


<SCRIPT TYPE="text/javascript">
<!--
  // 他のJava Script
//-->
</SCRIPT>

// 拾ってきたコードだけど動かない
<SCRIPT TYPE="text/javascript">
<!--
function DeleteListColor(x)
{
  if (x.hasChildNodes()) {
    while (x.childNodes.length > 0) {
      x.removeChild(x.firstChild)
    }
  }
}
//-->
</SCRIPT>

</HEAD>



<!-- ----------------------------------------------------------  -->
<!-- body start------------------------------------------------  -->
<BODY topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<DIV>


<!-- 拾ってきたコードだけど動かない -->
<!--
コメントアウト
<script type="text/javascript">
  function DeleteListColor() {
    sl = document.form_list_color.getElementById('list_color');
    while (sl.lastChild)
    {
      sl.removeChild(sl.lastChild);
    }
  }
</script>
-->

<!-- 拾ってきたコードだけど動かない -->
<!--
コメントアウト
<script type="text/javascript">
  function DeleteListColor() {
    var obj = document.getElementById('list_color');
    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>
-->



<!-- 以下、ここへ掲載用に単純化してある為、無意味なTABLEやsubmitにみえる -->

<!-- 行いたいことは、list_carの選択を変更時、list_colorのリストをクリア。 -->
<!-- ※クリア後、 -->


<FORM name="form_list_car" method="post" action="this.html">
  <TABLE>
   <CAPTION>1.車の種類のリストボックス</CAPTION>
    <TR>
      <TD>
        <SELECT name="list_car" onChange="DeleteListColor(list_color)">
          <OPTION align="left" value="car1">CAR1</OPTION>
          <OPTION align="left" value="car2">CAR2</OPTION>
          <OPTION align="left" value="car3">CAR3</OPTION>
       </SELECT>
      </TD>
    </TR>
  </TABLE>

  <!-- 本来は、色のクリア以外にも、車種に合わせた色をlist_colorに再設定など、使い方は色々 -->
  <INPUT type="submit" name="submit_list_car" value="この見本は再帰呼び出しボタン" />;");
</FORM>

<BR>

<FORM name="form_list_color" method="post" action="next.html">
  <TABLE>
   <CAPTION>2.車の色のリストボックス</CAPTION>
    <TR>
      <TD>
        <!-- sizeは、なぜか?パソコンでしか有効ではない。Padやスマフォは1行になる -->
        <SELECT name="list_color" size="3">
          <OPTION align="left" value="red">   赤色</OPTION>
          <OPTION align="left" value="yellow">黄色</OPTION>
          <OPTION align="left" value="black"> 黒色</OPTION>
       </SELECT>
      </TD>
    </TR>
  </TABLE>

  <INPUT type="submit" name="submit_list_color" value="次画面へ遷移" />;");
</FORM>


</DIV>
</BODY>
</HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>車と色の選択</TITLE>

<STYLE type="text/css">
<!--
BODY {
  border-top: 2px #FF0000 solid;
  text-align: center;
  color: #000000;
}
-->
</STYLE>


<SCRIPT TYPE="text/javascript">
<!--
  // 他のJava Script
//-->
</SCRIPT>

// 拾ってきたコードだけど動かない
<SCRIPT TYPE="text/javascript">
<!--
function DeleteListColor(x)
{
  if (x.hasChildNodes()) {
    while (x.childNodes.length > 0) {
      x.removeChild(x.firstChild)
    }
  }
}
//-->
</SCRIPT>

</HEAD>



<!-- ----------------------------------------------------------  -->
<!-- body start------------------------------------------------  -->
<BODY topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<DIV>


<!-- 拾ってきたコードだけど動かない -->
<!--
コメントアウト
<script type="text/javascript">
  function DeleteListColor() {
    sl = document.form_list_color.getElementById('list_color');
    while (sl.lastChild)
    {
      sl.removeChild(sl.lastChild);
    }
  }
</script>
-->

<!-- 拾ってきたコードだけど動かない -->
<!--
コメントアウト
<script type="text/javascript">
  function DeleteListColor() {
    var obj = document.getElementById('list_color');
    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>
-->



<!-- 以下、ここへ掲載用に単純化してある為、無意味なTABLEやsubmitにみえる -->

<!-- 行いたいことは、list_carの選択を変更時、list_colorのリストをクリア。 -->
<!-- ※クリア後、 -->


<FORM name="form_list_car" method="post" action="this.html">
  <TABLE>
   <CAPTION>1.車の種類のリストボックス</CAPTION>
    <TR>
      <TD>
        <SELECT name="list_car" onChange="DeleteListColor(list_color)">
          <OPTION align="left" value="car1">CAR1</OPTION>
          <OPTION align="left" value="car2">CAR2</OPTION>
          <OPTION align="left" value="car3">CAR3</OPTION>
       </SELECT>
      </TD>
    </TR>
  </TABLE>

  <!-- 本来は、色のクリア以外にも、車種に合わせた色をlist_colorに再設定など、使い方は色々 -->
  <INPUT type="submit" name="submit_list_car" value="この見本は再帰呼び出しボタン" />;");
</FORM>

<BR>

<FORM name="form_list_color" method="post" action="next.html">
  <TABLE>
   <CAPTION>2.車の色のリストボックス</CAPTION>
    <TR>
      <TD>
        <!-- sizeは、なぜか?パソコンでしか有効ではない。Padやスマフォは1行になる -->
        <SELECT name="list_color" size="3">
          <OPTION align="left" value="red">   赤色</OPTION>
          <OPTION align="left" value="yellow">黄色</OPTION>
          <OPTION align="left" value="black"> 黒色</OPTION>
       </SELECT>
      </TD>
    </TR>
  </TABLE>

  <INPUT type="submit" name="submit_list_color" value="次画面へ遷移" />;");
</FORM>


</DIV>
</BODY>
</HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>車と色の選択</TITLE>

<STYLE type="text/css">
<!--
BODY {
  border-top: 2px #FF0000 solid;
  text-align: center;
  color: #000000;
}
-->
</STYLE>


<SCRIPT TYPE="text/javascript">
<!--
  // 他のJava Script
//-->
</SCRIPT>

// 拾ってきたコードだけど動かない
<SCRIPT TYPE="text/javascript">
<!--
function DeleteListColor(x)
{
  if (x.hasChildNodes()) {
    while (x.childNodes.length > 0) {
      x.removeChild(x.firstChild)
    }
  }
}
//-->
</SCRIPT>

</HEAD>



<!-- ----------------------------------------------------------  -->
<!-- body start------------------------------------------------  -->
<BODY topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<DIV>


<!-- 拾ってきたコードだけど動かない -->
<!--
コメントアウト
<script type="text/javascript">
  function DeleteListColor() {
    sl = document.form_list_color.getElementById('list_color');
    while (sl.lastChild)
    {
      sl.removeChild(sl.lastChild);
    }
  }
</script>
-->

<!-- 拾ってきたコードだけど動かない -->
<!--
コメントアウト
<script type="text/javascript">
  function DeleteListColor() {
    var obj = document.getElementById('list_color');
    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>
-->



<!-- 以下、ここへ掲載用に単純化してある為、無意味なTABLEやsubmitにみえる -->

<!-- 行いたいことは、list_carの選択を変更時、list_colorのリストをクリア。 -->
<!-- ※クリア後、 -->


<FORM name="form_list_car" method="post" action="this.html">
  <TABLE>
   <CAPTION>1.車の種類のリストボックス</CAPTION>
    <TR>
      <TD>
        <SELECT name="list_car" onChange="DeleteListColor(list_color)">
          <OPTION align="left" value="car1">CAR1</OPTION>
          <OPTION align="left" value="car2">CAR2</OPTION>
          <OPTION align="left" value="car3">CAR3</OPTION>
       </SELECT>
      </TD>
    </TR>
  </TABLE>

  <!-- 本来は、色のクリア以外にも、車種に合わせた色をlist_colorに再設定など、使い方は色々 -->
  <INPUT type="submit" name="submit_list_car" value="この見本は再帰呼び出しボタン" />
</FORM>

<BR>

<FORM name="form_list_color" method="post" action="next.html">
  <TABLE>
   <CAPTION>2.車の色のリストボックス</CAPTION>
    <TR>
      <TD>
        <!-- sizeは、なぜか?パソコンでしか有効ではない。Padやスマフォは1行になる -->
        <SELECT name="list_color" size="3">
          <OPTION align="left" value="red">   赤色</OPTION>
          <OPTION align="left" value="yellow">黄色</OPTION>
          <OPTION align="left" value="black"> 黒色</OPTION>
       </SELECT>
      </TD>
    </TR>
  </TABLE>

  <INPUT type="submit" name="submit_list_color" value="次画面へ遷移" />
</FORM>


</DIV>
</BODY>
</HTML>
本文に 516 文字追加
ソース リンク
BLUEPIXY
  • 6,907
  • 1
  • 21
  • 34
車と色の選択

// 拾ってきたコードだけど動かない

0){x.removeChild(x.firstChild)}}}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>車と色の選択</TITLE>

<STYLE type="text/css">
<!--
BODY {
  border-top: 2px #FF0000 solid;
  text-align: center;
  color: #000000;
}
-->
</STYLE>


<SCRIPT TYPE="text/javascript">
<!--
  // 他のJava Script
//-->
</SCRIPT>

// 拾ってきたコードだけど動かない
<SCRIPT TYPE="text/javascript">
<!--
function DeleteListColor(x)
{
  if (x.hasChildNodes()) {
    while (x.childNodes.length > 0) {
      x.removeChild(x.firstChild)
    }
  }
}
//-->
</SCRIPT>

</HEAD>



<!-- ----------------------------------------------------------  -->
<!-- body start------------------------------------------------  -->
<BODY topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<DIV>


<!-- 拾ってきたコードだけど動かない -->
<!--
コメントアウト
<script type="text/javascript">
  function DeleteListColor() {
    sl = document.form_list_color.getElementById('list_color');
    while (sl.lastChild)
    {
      sl.removeChild(sl.lastChild);
    }
  }
</script>
-->

<!-- 拾ってきたコードだけど動かない -->
<!--
コメントアウト
<script type="text/javascript">
  function DeleteListColor() {
    var obj = document.getElementById('list_color');
    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>
-->



<!-- 以下、ここへ掲載用に単純化してある為、無意味なTABLEやsubmitにみえる -->

<!-- 行いたいことは、list_carの選択を変更時、list_colorのリストをクリア。 -->
<!-- ※クリア後、 -->


<FORM name="form_list_car" method="post" action="this.html">
  <TABLE>
   <CAPTION>1.車の種類のリストボックス</CAPTION>
    <TR>
      <TD>
        <SELECT name="list_car" onChange="DeleteListColor(list_color)">
          <OPTION align="left" value="car1">CAR1</OPTION>
          <OPTION align="left" value="car2">CAR2</OPTION>
          <OPTION align="left" value="car3">CAR3</OPTION>
       </SELECT>
      </TD>
    </TR>
  </TABLE>

  <!-- 本来は、色のクリア以外にも、車種に合わせた色をlist_colorに再設定など、使い方は色々 -->
  <INPUT type="submit" name="submit_list_car" value="この見本は再帰呼び出しボタン" />");
</FORM>

<BR>

<FORM name="form_list_color" method="post" action="next.html">
  <TABLE>
   <CAPTION>2.車の色のリストボックス</CAPTION>
    <TR>
      <TD>
        <!-- sizeは、なぜか?パソコンでしか有効ではない。Padやスマフォは1行になる -->
        <SELECT name="list_color" size="3">
          <OPTION align="left" value="red">   赤色</OPTION>
          <OPTION align="left" value="yellow">黄色</OPTION>
          <OPTION align="left" value="black"> 黒色</OPTION>
       </SELECT>
      </TD>
    </TR>
  </TABLE>

  <INPUT type="submit" name="submit_list_color" value="次画面へ遷移" />");
</FORM>


</DIV>
</BODY>
</HTML>
//-->function DeleteListColor(){sl = document.form_list_color.getElementById('list_color');while(sl.lastChild){sl.removeChild(sl.lastChild);}}-->function DeleteListColor(){var obj = document.getElementById('list_color');var f = obj.form;for(var i = 0; i-->1.車の種類のリストボックスCAR1CAR2CAR3

");


2.車の色のリストボックス赤色黄色黒色

");

------------------------------------------------------------ 
車と色の選択

// 拾ってきたコードだけど動かない

0){x.removeChild(x.firstChild)}}}//-->function DeleteListColor(){sl = document.form_list_color.getElementById('list_color');while(sl.lastChild){sl.removeChild(sl.lastChild);}}-->function DeleteListColor(){var obj = document.getElementById('list_color');var f = obj.form;for(var i = 0; i-->1.車の種類のリストボックスCAR1CAR2CAR3

");


2.車の色のリストボックス赤色黄色黒色

");

------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>車と色の選択</TITLE>

<STYLE type="text/css">
<!--
BODY {
  border-top: 2px #FF0000 solid;
  text-align: center;
  color: #000000;
}
-->
</STYLE>


<SCRIPT TYPE="text/javascript">
<!--
  // 他のJava Script
//-->
</SCRIPT>

// 拾ってきたコードだけど動かない
<SCRIPT TYPE="text/javascript">
<!--
function DeleteListColor(x)
{
  if (x.hasChildNodes()) {
    while (x.childNodes.length > 0) {
      x.removeChild(x.firstChild)
    }
  }
}
//-->
</SCRIPT>

</HEAD>



<!-- ----------------------------------------------------------  -->
<!-- body start------------------------------------------------  -->
<BODY topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<DIV>


<!-- 拾ってきたコードだけど動かない -->
<!--
コメントアウト
<script type="text/javascript">
  function DeleteListColor() {
    sl = document.form_list_color.getElementById('list_color');
    while (sl.lastChild)
    {
      sl.removeChild(sl.lastChild);
    }
  }
</script>
-->

<!-- 拾ってきたコードだけど動かない -->
<!--
コメントアウト
<script type="text/javascript">
  function DeleteListColor() {
    var obj = document.getElementById('list_color');
    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>
-->



<!-- 以下、ここへ掲載用に単純化してある為、無意味なTABLEやsubmitにみえる -->

<!-- 行いたいことは、list_carの選択を変更時、list_colorのリストをクリア。 -->
<!-- ※クリア後、 -->


<FORM name="form_list_car" method="post" action="this.html">
  <TABLE>
   <CAPTION>1.車の種類のリストボックス</CAPTION>
    <TR>
      <TD>
        <SELECT name="list_car" onChange="DeleteListColor(list_color)">
          <OPTION align="left" value="car1">CAR1</OPTION>
          <OPTION align="left" value="car2">CAR2</OPTION>
          <OPTION align="left" value="car3">CAR3</OPTION>
       </SELECT>
      </TD>
    </TR>
  </TABLE>

  <!-- 本来は、色のクリア以外にも、車種に合わせた色をlist_colorに再設定など、使い方は色々 -->
  <INPUT type="submit" name="submit_list_car" value="この見本は再帰呼び出しボタン" />");
</FORM>

<BR>

<FORM name="form_list_color" method="post" action="next.html">
  <TABLE>
   <CAPTION>2.車の色のリストボックス</CAPTION>
    <TR>
      <TD>
        <!-- sizeは、なぜか?パソコンでしか有効ではない。Padやスマフォは1行になる -->
        <SELECT name="list_color" size="3">
          <OPTION align="left" value="red">   赤色</OPTION>
          <OPTION align="left" value="yellow">黄色</OPTION>
          <OPTION align="left" value="black"> 黒色</OPTION>
       </SELECT>
      </TD>
    </TR>
  </TABLE>

  <INPUT type="submit" name="submit_list_color" value="次画面へ遷移" />");
</FORM>


</DIV>
</BODY>
</HTML>
 
ソース リンク

HTML内のJavaScriptでリストボックスをクリアする方法?

HTMLに2つのリストボックス(SELECT)があり、
1つ目のリストの選択を変更時に、
2つ目のリストをクリアするJavaScript?が組めません。

下記、ソース例ですが、JavaScriptの書き方や書いてある場所が悪いと
考えていますが、試行錯誤しても解決できない状態です。
※HTMLやJavaScriptの記述は、ブラウザがHTMLを読み込む時に上から
読み解釈し実行していくとあるJavaScriptの初心者用説明サイトに記述あり。

HTMLソース

車と色の選択

// 拾ってきたコードだけど動かない

0) { x.removeChild(x.firstChild) } } } //--> function DeleteListColor() { sl = document.form_list_color.getElementById('list_color'); while (sl.lastChild) { sl.removeChild(sl.lastChild); } } --> function DeleteListColor() { var obj = document.getElementById('list_color'); var f = obj.form; for (var i = 0; i --> 1.車の種類のリストボックス CAR1 CAR2 CAR3

");


2.車の色のリストボックス 赤色 黄色 黒色

");

------------------------------------------------------------

以上です。