选择项目时执行操作

Question

我需要根据我的下拉框中的哪个项目进行一些操作.

因此,如果选择带有前缀Blue的项目然后在下面显示一个文本框,并且如果选择了任何其他项目然后显示其他一些内容,我需要制作它,我怎么能以最简单的方式做到这一点？

更多解释:好的...我有一个下拉菜单,其中包含一个项目列表.我需要做的是,在他们选择带有前缀Blue的项目后,下拉菜单下的输入字段显示.如果他们选择任何其他项目将会发生其他事情.

到目前为止,我的下拉菜单是:

<select id="select1" name="selectz1">
<?php
$id = 0;
while ($row = mysql_fetch_row($result)) {
    echo "<option value=$id>$row[0]</option>";
    $id++;
}
?>
</select>

这就是HTML生成的:

<form action="ThisPage.php" method="POST">
Accounts: <br />
<select id="select1" name="selectz1">
<option value=0>account 2000-01</option><option value=1>account 2000-02</option>
<option value=2>blue 2000-03</option><option value=3>blue 2000-04</option>
</select>
</form>

Answer 1

所以,我理解的问题是:"如何根据a的值显示和隐藏表单字段<select>？"

在我们开始之前,这是一个骗局.我对那里的答案质量非常不满意,所以我将面对常规飞行并发布我自己的答案.

首先,这里的所有其他答案完全在正确的轨道上,但他们目前无法解释为什么他们做他们做的事情.

像其他人一样,我将在这个例子中使用jQuery.jQuery是一个很棒的Javascript库,可以大大减轻一堆重复的冗长任务.jQuery公开了一个名为$- yes,只是一个美元符号的函数,它允许您访问和修改页面.

步骤1

让我们创建一个最小的示例,类似于您现有的代码.

<form>
    <select name="select1" id="select1">
        <option value="1">account 001</option>
        <option value="2">account 002</option>
        <option value="3">blue 001</option>
    </select>
    <input type="text" name="text1" id="text1">
</form>

需要指出的重要事项:

1. 现代HTML要求value="1"引用属性值().
2. 我们需要使用jQuery定位的所有元素都需要易于识别.我们在id这里使用s.

第2步

让我们附上一个事件监听器.事件是与页面交互时发生的事情.在我们的例子中,我们将听取<select>该change事件.

<script type="text/javascript">
$(function() {
    $('#select1').on('change', function(event) {
        alert(this.value);
    });
});
</script>

在很多空间里,这是一大堆行话.让我解释一下.

• $() 是对jQuery的函数调用.
• $(function(){ ... })将函数传递给jQuery对象.这是一个快捷方式,表示"jQuery,当页面加载完成后,运行此功能".
• $('#select1')要求jQuery找到元素id'd with"select1"
• $('#select1').on('change', function ...)要求jQuery监视change事件,并执行所请求的功能.
• 最后,在函数本身内部,我们将抛出一个alert包含select元素当前值的对话框.

这是关于jsfiddle的演示.

第3步

现在,只要更改了选择菜单,我们就会运行一些Javascript.让我们显示并隐藏该文本框!

首先,我们需要隐藏它.因为我们使用Javascript显示和隐藏它,我们应该告诉它只在Javascript可以运行时隐藏.隐藏无法运行Javascript的人的东西使他们脾气暴躁.所以,我们将在onload处理程序中添加一个新行:

$(function() {
    $('#text1').hide();
    $('#select1'). // ...
});

如果您猜到新行是"请求jQuery隐藏text1元素",那么您猜对了!

现在,我们如何看待"蓝色"选项？回到那个jsfiddle并玩它.你有没有注意到value的option是被警告？那些根本不是蓝色的!我们需要实际选择option而不仅仅是值.这有点儿更有趣.

我们来看看MDN的文档<select>.它告诉我们它将自己暴露为HTMLSelectElement.不是什么大惊喜.它有一个名为的属性selectedIndex,它告诉我们哪个option被选中,并且它有一个名为的属性options,它让我们可以直接访问选项本身.甜!

让我们再次更新onload:

<script type="text/javascript">
$(function() {
    $('#text1').hide();
    $('#select1').on('change', function(event) {
        var opt = this.options[ this.selectedIndex ];
        alert('You picked ' + $(opt).text());
    });
});
</script>

再次,一个jsfiddle演示.

options有一个数组.与PHP一样,Javascript使用方括号来访问数组元素.

因此,我们选择我们的选项,然后将其包装在jQuery中,然后调用text方法以获取元素内的文本节点,而不是表单值.

好的,现在我们有一个字符串.我们能用它做什么？

第4步

像PHP一样,Javascript有正则表达式,一种进行模式匹配的方法.嘿,我们有一个匹配的模式!

<script type="text/javascript">
$(function() {
    $('#text1').hide();
    $('#select1').on('change', function(event) {
        var opt = this.options[ this.selectedIndex ];
        var picked_blue = $(opt).text().match(/blue/i);
        if(picked_blue) {
            alert('You picked a blue option!');
        } else {
            alert('You did not pick a blue option.');
        }
    });
});
</script>

再次,一个jsfiddle演示.

我们现在使用对象match上String的方法来使用正则表达式.特别是,以blue不区分大小写的方式查找字符的正则表达式(i最后会这样做).

这段代码现在应该检测蓝色的东西.是时候最终隐藏并显示文本字段了!

第5步

让我们一起潜入.

$(function() {
    $('#text1').hide();
    $('#select1').on('change', function(event) {
        var opt = this.options[ this.selectedIndex ];
        var picked_blue = $(opt).text().match(/blue/i);
        if(picked_blue) {
            $('#text1').show();
        } else {
            $('#text1').hide();
        }
    });
});

​

你看到它来了吗？你能猜出它的作用吗？

这是jsfiddle演示.

在这里,我们完成了任务.你可以将同样的技术应用于各种各样的东西.

注意我分散在这里的链接,尤其是jsfiddle,这是一个很好的Javascript和HTML游乐场,以及MDN站点,这是一个很棒的 Javascript和HTML参考.哦,还有jQuery手册.