Question

我举了here，演示6

的例子

一切正常，但是我无法弄清楚如何放置处理程序，这将从那里获取价值。也就是说，当您更改选择器以更改“内容”时。这是选择器的代码：

    <select id="cd-dropdown" class="cd-select">
    <option value="-1" selected>Choose an animal</option>
    <option value="1" class="icon-monkey">Monkey</option>
    <option value="2" class="icon-bear">Bear</option>
    <option value="3" class="icon-squirrel">Squirrel</option>
    <option value="4" class="icon-elephant">Elephant</option>
    </select>

，但在页面上已经显示

 <div class="cd-dropdown">
    <span>Choose an animal</span>
    <input type="hidden" name="cd-dropdown">
    <ul>
        <li data-value="1"><span class="icon-monkey">Monkey</span></li>
        <li data-value="2"><span class="icon-bear">Bear</span></li>
        <li data-value="3"><span class="icon-squirrel">Squirrel</span></li>
        <li data-value="4"><span class="icon-elephant">Elephant</span></li>
    </ul>
   </div>

，我意识到这种“转变”发生了

jquery.dropdown.js

创建了2个表单，forma1，id =“f1”，类似form2 c id =“f2”，一个表单确实隐藏了。选择

onChange="a(this.value)"

，

function a(value){  
$('#f' + value).show() 
if (value == 1) 
    $('#f2').hide() 
else
    $('#f1').hide()
}

中立选择有效，但事实并非如此。如果控制台浏览器调用具有特定值的函数，例如： а（2），所有正常输出。

因此，就像放置事件处理程序的位置一样，它会检查隐藏字段的值???

提前致谢

Answer 1

DEMO

<强> HTML ：

<select id="cd-dropdown" class="cd-select">
    <option value="-1" selected>Choose an animal</option>
    <option value="1" class="icon-monkey">Monkey</option>
    <option value="2" class="icon-bear">Bear</option>
    <option value="3" class="icon-squirrel">Squirrel</option>
    <option value="4" class="icon-elephant">Elephant</option>
</select>

<div id="div1" class="animalDiv">MONKEY</div>
<div id="div2" class="animalDiv">BEAR</div>
<div id="div3" class="animalDiv">SQUIRREL</div>
<div id="div4" class="animalDiv">ELEPHANT</div>

<强> CSS ：

.animalDiv {
 display:none;
}

<强> JS / jQuery的：

$(function() {
    $('#cd-dropdown').dropdown({
        gutter: 5,
        stack: false,
        delay: 100,
        slidingIn: 100,
        onOptionSelect: function(e) {
            var _counter = ($(e).html()).split('data-value="')[1].split('"')[0];
            $(".animalDiv").hide();
            $("#div" + _counter).show();
        }
    });
});

* 注意：我应该注意到我也在jquery.dropdown.js中进行了更改：

val !== -1 ? classes !== undefined ? optshtml += '<li><span data-value="' + val + '" class="' + classes + '">' + label + '</span></li>' : optshtml += '<li><span data-value="' + val + '">' + label + '</span></li>' : selectlabel = label;

将data-value从li移至span

Answer 2

我不确定你究竟在问什么，但是我会采取刺痛的方式。

我假设您正在询问如何在其中一个“选项”上添加处理程序。也就是说当有人点击'Monkey'时你想用功能来处理这个点击。

从查看插件源我发现他们已经允许一个名为'onOptionSelect'的选项。我没有看到关于此选项的任何解释或文档，但从查看源代码看，这是click事件的处理程序：

this.opts.on( 'click.dropdown', function() {
        if( self.opened ) {
            var opt = $( this );
            self.options.onOptionSelect( opt );
            self.inputEl.val( opt.data( 'value' ) );
            self.selectlabel.html( opt.html() );
            self.close();
        }
   } );

在这里你可以看到他们正在调用'onOptionSelect'函数并将所选项作为唯一参数传入。因此，当您在脚本中创建下拉列表时，请为您的处理程序添加函数：

$('#cd-dropdown').dropdown({onOptionSelect: aHandler});

function aHandler(value){  
$('#f' + value).show() 
if (value == 1) 
    $('#f2').hide() 
else
    $('#f1').hide()
}

通过这种方式，您可以编写处理程序，并在单击选项时使用该值执行任何操作。

如果您正在尝试找出“下拉列表”中选择的项目，则需要查询名称为“cd-dropdown”的“隐藏”。此隐藏输入具有选定值：

$('input[name="cd-dropdown"]').val() --> equals the selected value

我希望这会有所帮助。我认为该插件需要更多文档。

Answer 3

$('#cd-dropdown').dropdown({
            onOptionSelect: function (opt) {
                alert(opt.data('value'));
                return false;
            }
        });

要选择的事件处理程序

3 个答案: