Question

使用这个伟大的插件

http://exodecreations.com/jQuery/jqDropDown.html

我的Jquery代码：

jQuery(function() {  
  jQuery('#list4').jqDropDown({ 
    optionChanged: function(){
      jQuery("#firmos").html('My New Text');
    }, 
    direction: 'up', 
    defaultStyle: false, 
    containerName: 'theContainer', 
    toggleBtnName: 'awesomeToggleClass', 
    optionListName: 'thisListIsRocking', 
    effect: 'fade', 
    effectSpeed: 300 
  });
});

我的PHP代码：

<form action="#">
  <select id="list4" name="invoices">
    <option>Aspen</option>
    <option>Tokyo</option>
    <option>Cannes</option>
    <option>Capetown</option>
    <option>Paris</option>
    <option>Nice</option>
    <option>Geneva</option>
  </select>
</form>

根据所选的选项，我希望ID为#firmos的div更改其值。

我当前的示例将div文本更改为单个值，但我需要为每个选项使用不同的值..

任何有效的想法？城市列表大约为50 ..也许在每个<option>中定义一个属性？

Answer 1

我相信这可行。

jQuery("#firmos").html($(this).val());

在您的文档就绪功能中，它看起来像这样。

jQuery(function() {  
  jQuery('#list4').jqDropDown({ 
    optionChanged: function(){
      jQuery("#firmos").html($(this).val());
    }, 
    direction: 'up', 
    defaultStyle: false, 
    containerName: 'theContainer', 
    toggleBtnName: 'awesomeToggleClass', 
    optionListName: 'thisListIsRocking', 
    effect: 'fade', 
    effectSpeed: 300 
  });
});

已修改

实际上，如果要在另一个元素中重新显示该选项，则此控件具有一个名为占位符

的参数

你可以这样做。

jQuery(function() {  
  jQuery('#list4').jqDropDown({ 
    placeholder: '#firmos',
    direction: 'up', 
    defaultStyle: false, 
    containerName: 'theContainer', 
    toggleBtnName: 'awesomeToggleClass', 
    optionListName: 'thisListIsRocking', 
    effect: 'fade', 
    effectSpeed: 300 
  });
});

再次编辑

如果你想要一个自定义值，你可以做这样的事情

jQuery(function() {  
  jQuery('#list4').jqDropDown({ 
    optionChanged: function(){
      jQuery("#firmos").html((function (currentElement) {
        switch (currentElement.val())
        {
          case "someval":
            return "somethingSpecial1";
            break;
          case "someval2":
            return "somethingSpecial2";
            break;
          /// more case statements.
        }
      })($(this)));
    }, 
    direction: 'up', 
    defaultStyle: false, 
    containerName: 'theContainer', 
    toggleBtnName: 'awesomeToggleClass', 
    optionListName: 'thisListIsRocking', 
    effect: 'fade', 
    effectSpeed: 300 
  });
});

Answer 2

好吧，我看到这个插件只复制select中的list <li>元素，似乎无法从select获取确切更改的值，因为如果它不会改变您看到了DOM（这使我假设当onchange更改时，该插件中的trigger事件仅用于list。

所以，似乎你需要做一些棘手的事情来获得实现selected事件重新创建的onchange值。

像这样：

现场演示： http://jsfiddle.net/oscarj24/nuRKE/

$(function () {

    var firmos = $('#firmos');

    $('#list4').jqDropDown({
        direction: 'up',
        defaultStyle: false,
        containerName: 'theContainer',
        toggleBtnName: 'awesomeToggleClass',
        optionListName: 'thisListIsRocking',
        effect: 'fade',
        effectSpeed: 300
    });

    //This will be your new 'onchange' event when using 'jqDropDown' plugin.
    $('ul .ddOption').on('click', function(e){
        var selected = $.trim($(e.target).text());
        switch (selected)
        {
          case 'Aspen':
            firmos.html('You selected Aspen.');
            break;
          case 'Tokyo':
            firmos.html('You selected Tokyo.');
            break;
          //Do the same for other options.
        }

    });
});

根据<select>选项</select>更改div值

2 个答案: