2

選択ボックスがあり、オプションをクリックしたときに非表示の div にヘルプ テキストを表示したい:

<select  onchange="optionCheck()" multiple="multiple" name="test" id="options" size="15" class="form-select">
    <option value="1">option 1</option>
    <option value="2">option 2</option>
</select>

<div id="help1" style=visibility:hidden>help text 1</div>
<div id="help2" style=visibility:hidden>help text 2</div>

<script type="text/javascript">
    function optionCheck(){
        var option = document.getElementById("options").value;
        if(option == "1"){
            document.getElementById("help1").style.visibility ="visible";
            document.getElementById("help2").style.visibility ="hidden";
        }
        if(option == "2"){
            document.getElementById("help2").style.visibility ="visible";
            document.getElementById("help1").style.visibility ="hidden";
        }
    }
</script>

オプションごとに「if」ステートメントを書く必要がないように、単純なループを作成するにはどうすればよいですか?

 document.getElementById(option).style.visibility ="visible";

動作していません - JavaScript と私はうまくいきません ;-)

また、オプションが選択されているときに他のすべての div を非表示にする簡単な方法はありますか?

4

6 に答える 6

4

いくつかの CSS クラスを使用して div を非表示/表示することをお勧めします。次に、JavaScript で各 div のクラス属性を設定するだけです。

複数のオプションを選択した場合でも、このソリューションは機能します。

HTML:

<select onchange="optionCheck()" multiple="multiple" name="test" id="options" size="15" class="form-select">
    <option value="1">option 1</option>
    <option value="2">option 2</option>
</select>

<div id="help1" class="helpText">help text 1</div>
<div id="help2" class="helpText">help text 2</div>

CSS:

/* consider "display: none/block" instead of visibility: hidden/visible
   if you don't want the hidden divs to occupy space */
.helpText {
    visibility: hidden;
}
.helpTextShow {
    visibility: visible;
}​

JavaScript:

function optionCheck() {
    var i, len, optionVal, helpDiv,
        selectOptions = document.getElementById("options");

    // loop through the options in case there
    // are multiple selected values
    for (i = 0, len = selectOptions.options.length; i < len; i++) {

        // get the selected option value
        optionVal = selectOptions.options[i].value;

        // find the corresponding help div
        helpDiv = document.getElementById("help" + optionVal);

        // move on if we didn't find one
        if (!helpDiv) { continue; }

        // set CSS classes to show/hide help div
        if (selectOptions.options[i].selected) {
            helpDiv.className = "helpText helpTextShow";
        } else {
            helpDiv.className = "helpText";
        }
    }    
}

// alternative method of binding the onchange handler, merely a suggestion
//document.getElementById("options").onchange = optionCheck;

</p>

デモ用の jsFiddle を次に示します: http://jsfiddle.net/willslab/3N9pm/9/

それが役立つことを願っています！

于 2012-04-21T04:11:15.820 に答える
2

変更された HTML および JavaScript コードを参照してください。

HTML:

<div id="help1" style="display:none">help text 1</div>
<div id="help2" style="display:none">help text 2</div>

ジャバスクリプト:

function optionCheck()
{
    var option = document.getElementById("options").value;
    if(option == "1"){
        document.getElementById("help1").style.display ="";
        document.getElementById("help2").style.display ="none";
    }
    if(option == "2"){
        document.getElementById("help2").style.display ="";
        document.getElementById("help1").style.display ="none";
    }
}
于 2012-04-21T04:02:16.050 に答える
2

これが私がそれを行う方法です：

まず、私はかなり怠け者で、style="visibility: hidden;" と入力したくありません。それらの各divで。CSS を使用して一度にすべてを非表示にする方が簡単です。

HTML:

<select  onchange="optionCheck()" multiple="multiple" name="test" id="options" size="15" class="form-select">
  <option value="1">option 1</option>
  <option value="2">option 2</option>
</select>

<div id="help-wrapper">
  <div id="help1">help text 1</div>
  <div id="help2">help text 2</div>
</div>

CSS:

#help-wrapper div {
  visibility: hidden;
}

/* It's better to use a class to highlight the selection,
   in case you feel like adding more styles later (like a border or something).
 */
.current-help {
  visibility: visible;
}

これで、Javascript をもう少し汎用的にすることができます。

function optionCheck()
{
  var i;
  var optionIndex = document.getElementById("options").value;

  var helpWrapper = document.getElementById("help-wrapper");
  var helpDivs = helpWrapper.getElementsByTagName("div");

  // Loop through all the help divs.
  for (i=0; i<helpDivs.length; i++) {
    // Parse out the numeric portion of this help div's id.
    var helpIndex = helpDivs[i].substring[4];

    // If we found our div, highlight it.
    if (helpIndex === optionIndex) {
      helpDivs[i].className = "current-help";
    }
    // Otherwise, we should make sure it's hidden,
    // in case it was the previous selection.
    else {
      helpDivs[i].className = "";
    } 
  }
}

そして、それはトリックを行う必要があります!

上記のコードについてご不明な点がございましたら、喜んでお答えいたします。

于 2012-04-21T07:10:38.617 に答える
1

css スタイルを引用符で囲むことをお勧めします。 

  <div id="help1" style="visibility:hidden">help text 1</div>
  <div id="help2" style="visibility:hidden">help text 2</div>


function optionCheck(){
        var option = document.getElementById("options").value;
        document.getElementById("help" + option).style.visibility ="visible";
        }
}
于 2012-04-21T03:59:55.730 に答える
0

の代わりにgetElementById(option)、 のようなものを試してくださいgetElementById("help" + option)。

于 2012-04-21T03:42:54.140 に答える
0

JavaScriptで三項演算子を試すことができます：

document.getElementById("options").value == 1?(document.getElementById("help1").style.visibility ="visible",document.getElementById("help2").style.visibility ="hidden"):(document.getElementById("help2").style.visibility ="visible",document.getElementById("help1").style.visibility ="hidden");

これにより、複数のifステートメントが回避されます

于 2012-04-21T03:53:57.003 に答える