0

いくつかのオプションがある選択ボックスがあります。各オプションを選択した場合は、個別のdivを表示する必要があります。

もちろん、私は次のようにすべてのオプション名/値に対してそれを行うことができます：

HTML：

<form class="floatleft">
      <select size="1" id="stadtauswahl" name="Standortauswahl">
        <option value="" style="color: #666;">&nbsp;&nbsp;&nbsp;Bitte wählen Sie&nbsp;&nbsp;&nbsp;</option>
        <option value="/kontakt/hauptsitz/">&nbsp;&nbsp;&nbsp;Wiesbaden</option>
        <option value="/kontakt/berlin/">&nbsp;&nbsp;&nbsp;Berlin</option>
        <option value="/kontakt/bad-harzburg/">&nbsp;&nbsp;&nbsp;Bad Harzburg</option>
        <option value="/kontakt/koeln/">&nbsp;&nbsp;&nbsp;Köln</option>
        <option value="/kontakt/hamburg/">&nbsp;&nbsp;&nbsp;Hamburg</option>
        <option value="/kontakt/muenchen/">&nbsp;&nbsp;&nbsp;München</option>
        <option value="/kontakt/stuttgart/">&nbsp;&nbsp;&nbsp;Stuttgart</option>
      </select>
    </form>

Jquery：

$(document).ready( function() {
  $('#stadtauswahl').bind('change', function (e) { 
    if( $('#stadtauswahl').val() == '/kontakt/hauptsitz/') {
      $('#wiesbaden').slideToggle();
    }
    else{
      $('#wiesbaden').slideUp();
    }         
  });
});

しかし、 jqueryで名前を読み取ってから、同じ名前のdivを選択して表示したいと思います。

誰かが私を助けることができますか？

ありがとう！

4

2 に答える 2

2

代わりにこのコードを試してください...

$(document).ready( function() {
    $('#stadtauswahl').bind('change', function (e) { 
        $(this).find("option").each(function() {
            var text = $(this).text().toLowerCase().split(" ").join("").trim();
            console.log("'" + text + "'");
            if ($(this).is(":selected")) {
                $('#' + text).slideDown();
            } else {
                $('#' + text).slideUp();
            }
        });
    });
});​

各オプションの div を検索し (テキストからすべてのスペースを削除)、slideUp()選択されていないすべてのオプションと選択されたオプションに対して a を実行しますslideDown()。

ノート

理想的には、すべての div を非表示にするために使用できるクラスを表示/非表示にするように各 div を指定すると、関連する 1 つだけを表示するのが簡単になります。また、select 値としてパスを使用する理由がない限り、値として div ID を使用することをお勧めします。そのため、テキストに無効な文字が含まれていないことに依存する必要はありません (ID 用)。

url パラメーターとテキスト パラメーターを持つオブジェクトの配列を用意し、選択オプションでそれぞれのインデックスを保持する方が理にかなっている場合があります。これは、選択したオプションの値を確認し、それを使用して配列から関連するすべての情報を取得できることを意味します。

オプションと考えだけです-上記のスクリプトは、あなたが求めることを行います:)

于 2012-10-11T11:09:16.110 に答える
0

アップデート：

jsFiddle: http://jsfiddle.net/TV9dY/

JS:

    $(document).ready( function() {

  $('#stadtauswahl').bind('change', function (e) {

    if( $('#stadtauswahl').find(":selected").text() != '') {

      $('#wiesbaden').slideToggle();
        $('#myDiv').remove();
$('#stadtauswahl').after('<div id="myDiv">' + $('#stadtauswahl').find(":selected").text() + '</div>');

    } else {

      $('#wiesbaden').slideUp();

    }         

  });

});

テストされていませんが、動作するはずです。

于 2012-10-11T11:01:34.713 に答える