5

さて、この質問は間違いなく以前に尋ねられたもので、実際にjqueryで質問に対する答えを見つけることができましたが、答えを実装しようとしたときにうまくいきませんでした。私はむしろjava-scriptでそれをしたいので.....

DB からコンマで区切られたテキストの文字列を読み取っています。それらを複数選択ボックスで選択されたオプションに変換したいと考えています。

これまで私がやってきたことは、ボタンをクリックしたときにハードコードされた文字列に一致する単一のオプションをブラウザーに選択させようとすることだけですが、それを機能させることさえできません。しかし、私は質問をしているので、スクリプト全体を書き出して、すべてを確認し、予想される他の問題を見つけられるようにすることもできると考えました...最後に、これを実行するにはどうすればよいですかページの負荷について？これが冗長で初歩的である場合は申し訳ありませんが、私はJSに非常に慣れておらず、質問に対する既存の回答がほとんど役に立たないことを発見しています。前もって感謝します。

編集

したがって、アサドの回答ごとに「select.options[i].value=true」（文字列ではなくブール値）を使用すると、割り当てが機能することがわかりました。ただし、Harvest の Chosen の複数選択コントロールを使用しています: http://harvesthq.github.com/chosen/

選択したクラスをコントロールに割り当てた場合、スクリプトは機能しません。コントロールが JQuery で呼び出していることはわかっていますが、これが理由ですか? それを機能させることは可能ですか？再度、感謝します。

function selectitems() {
  var select = document.getElementById("multiselectid");
  var array = stringFromDB.split(",");

  for(count=0, count<array.length, count++) {
    for(i=0; i<select.options.length; i++) {
      if(select.options[i].value == array[count]) {
        select.options[i].selected="selected";
      }
    }
  }
}
4

2 に答える 2

2

最初のforループには 2 つの構文エラーがあります。ブラウザでコンソールを確認してみてください

for(count=0, count<array.length, count++) {

次のようにする必要があります。

for(count=0; count<array.length; count++) {

「,」が「;」に変わっていることに注意してください。count=0とcount<array.lengthパーツの後。

また、and変数がグローバルに宣言されないように、for(var count=0andを使用することもできます。for(var i=0counti

于 2012-11-20T06:47:27.227 に答える
1

さて、私は私の答えであなたの質問のすべての部分に対処しようとします。

Ianが述べたように、forステートメントに構文エラーがあります。

考え直して、コードを示してから説明します。わかりやすくするために、HTMLドキュメント全体を含めました。

<!DOCTYPE html>
<html lang=en-CA>
    <meta charset=utf-8>
    <title>JavaScript in multi-select</title>

    <script>

    function selectItems(stringFromDB) {
        'use strict';

        var select = document.getElementById("multiselectid"),
            stringArray = stringFromDB.split(","),
            count = 0,
            i;

        for(count = 0; count < stringArray.length; count += 1) {
            for(i = 0; i < select.options.length; i += 1) {
                if(select.options[i].value === stringArray[count]) {
                    select.options[i].selected = true;
                }
            }
        }
    }

    window.addEventListener('load', function() {
        'use strict';

        // The "string from DB" would be the parameter here
        selectItems( 'hockey,volleyball,football');
    }, false);

    </script>

    <body>
        <div>
            <select id='multiselectid' multiple>
                <option value="hockey">Hockey</option>
                <option value="golf">Golf</option>
                <option value="volleyball">Volleyball</option>
                <option value="football">Football</option>
            </select>
        </div>

さて、説明のために。

  1. body要素の従来のonloadイベント属性を使用してページの読み込み時にスクリプトを実行する代わりに（必要に応じて）、イベントを含むイベントハンドラーをDOM要素にアタッチしましloadたwindow。イベントハンドラーは、JavaScriptをHTMLから分離するのに役立つため（および他の多くの理由）、より便利です。イベントハンドラーの詳細については、https ：//developer.mozilla.org/en-US/docs/DOM/element.addEventListenerを参照してください。

  2. 関数selectItems()では、コードをクリーンに保つために、すべての変数を1つの宣言に入れました。

    3.配列に関する潜在的な問題を回避するために、stringArray代わりに変数を呼び出しました。arrayはJavaScriptの予約語であり、一部のブラウザで問題が発生する可能性がありますが、どのブラウザが存在するかは完全にはわかりません。

  3. 常に、常に、常に===の代わりに使用し==ます。そうすれば、比較が厳密で正しいことを確認できます（つまり、比較される両方のものが同じタイプであり、この場合は文字列です）。

  4. を使用して、JavaScript関数の処理を厳密モードで強制することをお勧めします'use strict;'。このようにして、許可されていないものを検出した場合にブラウザーが停止（および例外をスロー）するため、より優れたJavaScriptコードを記述できます。

これがお役に立てば幸いです。まだ混乱している場合は、お気軽に質問してください。

于 2012-11-20T07:12:29.053 に答える