在选择后链接输入选项 - Chaining an input option after a select?

Chaining an input option after a select?

本文关键字：输入选项链接选择 | 更新日期: 2023-09-27

我想知道如何在表单中链接选择后链接输入框。

我正在使用 http://www.appelsiini.net/projects/chained 来链接我的选择，它可以工作。但是，我需要调整此设置以允许输入的链接。在下面的示例中，有人会选择一个选项，例如一个项目上有强度，然后是值选项的选择菜单，然后输入值。我也在尝试合并到其中，在输入项目、控制器、值的 3 个选项后，用户可以选择过滤更多，以便出现另一个具有相同力量、敏捷性等选项的框。 http://jsfiddle.net/isherwood/XMx4Q/是我曾经将其合并到我自己的工作中的工作示例。

<form id="myform" name="myform" method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
    <div>
        <label for="searchterm">Name:</label>
        <input type="text" name="searchterm">
    </div>
    <div>
        <div class="chainedSelectFilter">
            <select name="specificFilter" class="attribute">
                <option value="" selected>Select a Filter</option>
                <option value="strength">Has Strength</option>
                <option value="agility">Has Agility</option>
                <option value="spirit">Has Spirit</option>
                <option value="stamina">Has Stamina</option>
            </select>
                <select name="specificFilter" class="valueController">
                    <option value=">" selected>></option>
                    <option value=">=">>=</option>
                    <option value="=">=</option>
                    <option value="<=">&#60;=</option>
                    <option value="<">&#60;</option>
                </select>
        </div>
    </div>
</div>

<div>
    <label for="submit"></label>
    <input type="submit" name="submit" value="Filter">
</div>

下面的

代码参考显示了如何实现此目的。这是jsFiddle，表明它正在工作。

.HTML

<form id="myform">
    <div class="container">
    <select>
        <option value=""></option>
        <option value="one">one</option>
        <option value="two">two</option>
    </select>
    <input type="text" class="chain" value="" placeholder="Type here"/> 
    </div>
    <div class="container">
    <select>
        <option value=""></option>
        <option value="one">one</option>
        <option value="two">two</option>
    </select>
    <input type="text" class="chain" value="" placeholder="type here"/>
    </div>
    <div class="container">
    <select>
        <option value=""></option>
        <option value="one">one</option>
        <option value="two">two</option>
    </select> 
    <input type="text" class="chain" value=""/> 
    </div>
</form>

.JS

$('select').change(function () { 
    $(this).next('input').fadeIn();
});
$('body').on('keyup','input.chain',function () {    
    $(this).parent().next('div').fadeIn();
});