Question

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

我使用http://www.appelsiini.net/projects/chained来链接我的选择并且它有效。但是，我需要调整它以允许链接输入。在下面的例子中，有人会选择一个选项，如项目有一个强度，然后选择价值选项菜单然后输入值。我试图加入这个项目，控制器，值的3个选项后，用户可以选择过滤更多，以便另一个框出现具有相同的强度，敏捷性等选项{{3我曾经将这个工作结合到我自己的工作中。

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

Answer 1

下面的代码参考显示了如何完成此任务。这是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();
});

选择后链接输入选项？

1 个答案: