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>

查询：

$(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 ，对选定的选项执行 a slideDown()。

笔记

理想情况下，你会给每个 div 显示/隐藏一个类，你可以用它来隐藏它们，然后只显示一个相关的就变得更容易了。此外，除非有理由将路径作为选择值，否则最好使用 div ID 作为值，因此您不必依赖其中没有无效字符的文本（对于 ID）。

拥有一个具有 url 参数和 text 参数的对象数组可能更有意义，并且您将每个对象的索引保存在选择选项中。这意味着您可以简单地查看所选选项的值并使用它从数组中获取所有相关信息。

只是选项和想法 - 上面的脚本会按照你的要求做:)

于 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 回答