リストの表示順を変えるには？

[上に] [前に] [次に]
松岡 2000/05/15(月) 18:04:38
いきなりの質問で、恐縮ですが教えて下さい。
DBからデータを読み込んで表示するリストボックスにおいて
DBの更新をしない状態で、表示順を変更したいのです。
噂によるとキャッシュを使用すれば
そのような事が可能と聞いたのですが
実際にどのような手順を踏めばいいのか
色々と調べたのですが、分かりませんでした。
どなたか、ご存知の方がいらっしゃいましたら
教えていただけないでしょうか？
偽 2000/05/15(月) 18:54:10
？？？
> (JavaScript/DHTML/CSSなど編)
と、何の関係が？
H&A [E-Mail] 2000/05/16(火) 12:24:18
松岡さん：
> DBからデータを読み込んで表示するリストボックスにおいて
> DBの更新をしない状態で、表示順を変更したいのです。

偽さん：
> ？？？
> > (JavaScript/DHTML/CSSなど編)
> と、何の関係が？

JavaScript を使用して、select 要素中の option 要素の順序を変更したいということではないかと思います。
たとえば、下記のようにすればボタンを押すたびに option 要素の順序を逆転させることができます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
  <meta http-equiv="Content-Script-Type" content="text/javascript">
  <script type="text/javascript">
  <!--
    function sel_reverse()
    {
      var area = document.inputForm.testsel, sellen = area.options.length;
      for(var i = 0; i < sellen / 2; i++) {
        var swap1 = area.options[i], swap2 = area.options[sellen - i - 1];
        var tmpvalue = swap1.value, tmptext = swap1.text;
        swap1.value = swap2.value;
        swap1.text = swap2.text;
        swap2.value = tmpvalue;
        swap2.text = tmptext;
      }
      return false;
    }
  //-->
  </script>
  <title>Sample code for sorting select options</title>
</head>
<body>
  <h1>Sample code for sorting select options</h1>
  <form id="inputForm" name="inputForm" action="" onsubmit="return sel_reverse();">
    <p>
      <select name="testsel" size=1>
        <option value="1">foo</option>
        <option value="2">bar</option>
        <option value="3">hoge</option>
        <option value="4">McCOL</option>
        <option value="5">Dr.Pepper</option>
      </select>
      <input type="submit" value="Reverse">
    </p>
  </form>
</body>
</html>
松岡 2000/05/16(火) 13:09:24
H&Aさん、ありがとうございます。
私の説明不足でご迷惑をおかけした皆様、申し訳ありませんでした。
H&Aさんが教えて下さった事を私も聞きたかったのです。
ただ、初心者の私にはH&Aさんが教えて下さったソースを理解するのに
少し時間がかかると思いますが参考にさせて頂き
なんとか、頑張ってみたいと思います。

それと、最後に一つお聞きしたいのですが
DBから読み込んで、表示しているリストボックスに
DBの更新をしないで、optionを追加する事は可能なのでしょうか？
H&A [E-Mail] 2000/05/16(火) 13:39:21
松岡さん：
> DBから読み込んで、表示しているリストボックスに
> DBの更新をしないで、optionを追加する事は可能なのでしょうか？

option 要素の数を動的に変更すればできるような気もしますが、環境によってはうまく動かないかもしれません。
もっとも、先にあげたサンプルもすべての環境で正しく動作するわけではありませんが…

以下のような関数を script 要素中に記述して、ボタンの onclick などでこれを実行してみてください。

function sel_add()
{
  var area = document.inputForm.testsel, idx = area.options.length;
  area.options.length = idx + 1;
  area.options[idx].value = idx;
  area.options[idx].text = "Added option " + idx;
  return false;
}

Windows 2000 上の Netscape Navigator 3.03, 4.7, Internet Explorer 5.01 では選択肢が追加されましたが、Netscape 6 PR1 では残念ながら追加されませんでした。
おそらく、上記の "area.options.length" が Read-Only になっているせいではないかと思います。

イントラネット用ということで環境を制限されるのでしたら、環境による動作の差異は考慮しなくてもよいでしょう。
松岡 2000/05/16(火) 13:55:23
[[解決]]
H&Aさん、度重なる回答ありがとうございます。
実際に私のマシンで行ったところリストが追加されました。
環境等の問題を考えると頭が痛いのですが
イントラネット用なので何とかするつもりではいます。
まずは自分のマシンで思い通りに出来るよう
これから努力していきます。
本当にありがとうございました。
[上に] [前に] [次に]