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

因此，我理解的问题是：“如何根据<select>的价值显示和隐藏表单字段？”

在我们开始之前，这是一个dupe。我深深地对那里的答案质量不满意，所以我将面对常规飞行并发布我自己的。

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

与其他人一样，我将在此示例中使用jQuery。 jQuery是一个很棒的Javascript库，可以大大减轻一堆重复的冗长任务。 jQuery公开了一个名为$的函数 - 是的，只是一个美元符号 - 可以让你访问和修改页面。

第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>

需要指出的重要事项：

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

第2步

我们附上event listener。事件是与页面交互时发生的事情。在我们的情况下，我们将收听<select>事件的change。

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

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

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

这是demo on jsfiddle。

第3步

现在，每当更改选择菜单时，我们都会运行一些Javascript。让我们显示并隐藏该文本框！

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

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

如果您猜到新行是“请求jQuery隐藏text1元素”，那么您猜对了！

现在，我们如何看待“蓝色”选项？回到那个jsfiddle并玩它。您是否注意到value的{{1}}被警告了？那些根本不是蓝色的！我们需要实际访问选中的option 而不仅仅是值。这有点儿更有趣。

我们来看看MDN's documentation on <select>。它告诉我们它会将自己暴露为HTMLSelectElement。不是什么大惊喜。它有一个名为option的属性，告诉我们哪个selectedIndex已被选中，并且它有一个名为option的属性，这使我们可以直接访问这些选项。甜！

让我们再次更新onload：

options

再次，jsfiddle demo。

<script type="text/javascript"> $(function() { $('#text1').hide(); $('#select1').on('change', function(event) { var opt = this.options[ this.selectedIndex ]; alert('You picked ' + $(opt).text()); }); }); </script>有一个数组。与PHP一样，Javascript使用方括号来访问数组元素。

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

太棒了，现在我们有一个字符串。我们能用它做什么？

第4步

与PHP一样，Javascript有regular expressions，这是一种进行模式匹配的方法。嘿，我们有一个匹配的模式！

options

再次，jsfiddle demo。

我们现在使用match method on the String object来使用正则表达式。特别是，以不区分大小写的方式查找字符<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>的正则表达式（最后为blue）。

此代码现在应该检测蓝色内容。是时候最终隐藏并显示该文本字段了！

第5步

让我们一起潜入。

你有没有看到它？你能猜出它的作用吗？

这是jsfiddle demo。

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

注意我分散在这里的链接，特别是jsfiddle，这是一个用于Javascript和HTML的伟大的游乐场，以及一个伟大的 Javascript和HTML参考。哦，还有jQuery手册。

Answer 2

可以使用Javascript完成。

将ID提供给您的下拉框。选择时根据其值切换div。价值可以通过var item= document.getElementById('id').value;获得。然后，

function toggle()
{

var item= document.getElementById('yourdropdownid').value;

    if(item=='yourfirstoption')
    {
    document.getElementById('div1id').style.display="block";
    document.getElementById('div2id').style.display="none";
    }
    else if(item=='yoursecondoption')
    {
    document.getElementById('div2id').style.display="block";
    document.getElementById('div1id').style.display="none";
    }
}

一个例子是here。这不是一个确切的例子。但我希望你能通过连接这篇文章找到你的解决方案。祝你好运。

Answer 3

<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).on("change", "#color", function(){
        value = $(this).val().split('-')[0]; // extracting the color prefix from selected value
        if(value == 'Blue') // checking if value is Blue
        {
            $('#other').hide(); // hiding the div having id "other"
            $('#blue').show(); //showing div having id"blue"
        }

        else // if selected value have prefix other than Blue 
        {
            $('#blue').hide(); //hide the div having id "blue"
            $('#other').show(); // show the div having id "other"
        }

    });
</script>
<style>
    /* hiding both divs by default, these div will show up on dropdown change event depending upon the selected value */
    #blue, #other{display: none;}
</style>

<select id="color" name="color">
    <option value="">--Select--</option>
    <option value="Blue-value">Blue</option>
    <option value="Red-value">Red</option>
    <option value="Black-value">Black</option>
</select>

<div id="blue">
    your blue div
</div>

<div id="other">
    your other div
</div>

选择项目时执行操作

3 个答案:

第1步

第2步

第3步

第4步

第5步