要选择的事件处理程序

Posted 2023-05-07

【中文标题】要选择的事件处理程序

【英文标题】：The event handler to select

【发布时间】：2012-12-07 03:58:22

【问题描述】：

我以here为例，Demo 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) ，全部正常输出。

所以就像把事件处理程序放在哪里一样，它会检查隐藏字段的值???

提前致谢

【问题讨论】：

这个问题可能会被关闭，因为没有人能真正弄清楚你的问题是什么......尝试澄清你的问题，添加代码并指出你感到困惑的地方和/或展示你的内容已经试过了。

很高兴你提出这个问题。没有答案！但我肯定喜欢那些演示中显示的效果。很想阅读更多关于这些的内容！

这到底是怎么回事？该问题被否决了 3 次并被关闭，在下一秒内它获得了 +2 票并被打开！

哦！哈哈。这是一个新问题 - ***.com/questions/13958489/… - My Bad。

您是在问如何获取选择的值或将点击处理程序绑定到什么以捕获所选项目的点击事件？

【参考方案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

【讨论】：

我想做一个小提琴，但我没有耐心修改你刚刚为展示这个工作所做的 javascript 和 css 的数量。荣誉和很好的例子。

【参考方案2】：

我不确定你在问什么，但我会尝试一下。

我假设您正在询问如何将处理程序添加到单击“选项”之一。也就是说，当有人点击“猴子”时，您想用一个函数来处理该点击。

通过查看插件源，我看到他们允许使用名为 'onOptionSelect' 的选项。我没有看到有关此选项的任何解释或文档，但从查看源代码来看，这是单击事件的处理程序：

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

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

【参考方案3】：

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