静态列表

Question

你好我有第一个输入是

<select id="selectcontract" name="contract" class="input-xlarge" >
<option value="">Contract</option>
<option value="1">Buy</option>
<option value="2">Rent</option>

此输入包含2个购买和租赁选项。所以当我选择Rent来填充第二个和第三个输入的值时，如果您选择Rent来准确填充那些相同的输入但具有不同的值和值名称，那么我想要。

这是第二个和第三个输入：

第二次选择：

<select id="Pricefrom" name="minimum_price" >
    <option value="">Price From</option>
    <option value="1">1</option>
    <option value="500">500</option>
    <option value="1000">1000</option>
    <option value="1500">1500</option>

第三选：

<select id="Princeuntil" name="maximum_price" >
    <option value="">Price Until</option>
    <option value="500">500</option>
    <option value="1000">1000</option>
    <option value="1500">1500</option>
    <option value="2000">2000</option>

我应该在哪个方向上实现这一目标？我想它应该是jquery的东西，因为当你选择购买或租赁时，应该进行调整。

Answer 1

您可以创建一个div用于购买，一个用于出租与课程，并在显示或隐藏他们之后关于小提琴的例子：

https://jsfiddle.net/tehb2fxt/1/

Div Buy（必须更改名称prop以不重复）并添加CLASS“class_price”

<select id="selectcontract" name="contract" class="input-xlarge class_price">    
<option value="">Contract</option>
<option value="1">Buy</option>
<option value="2">Rent</option> 
</select>
<div class="div_buy" style="display: none">
    <select id="Pricefrom_buy" name="Pricefrom_buy" class="class_price">
    <option value="">Price From Buy</option>
    <option value="1">1</option>
    <option value="500">500</option>
    <option value="1000">1000</option>
    <option value="1500">1500</option>
</select>     
     <select id="Princeuntil_buy" name="Princeuntil_buy" class="class_price">
    <option value="">Price Until Buy</option>
    <option value="500">500</option>
    <option value="1000">1000</option>
    <option value="1500">1500</option>
    <option value="2000">2000</option>
</select>
</div>

<div class="div_rent" style="display: none">
    <select id="Pricefrom_rent" name="Pricefrom_rent" class="class_price">
    <option value="">Price From Rent</option>
    <option value="8">8</option>
    <option value="800">800</option>
    <option value="8000">8000</option>
    <option value="8500">8500</option>
</select>     
     <select id="Princeuntil_rent" name="Princeuntil_rent" class="class_price">
    <option value="">Price Until Rent</option>
    <option value="900">900</option>
    <option value="9000">9000</option>
    <option value="9500">9500</option>
    <option value="9000">9000</option>
</select>
</div>

根据选择显示和隐藏的Jquery：

 <script type="text/javascript">
    $(document).ready(function(){
        $('#selectcontract').change
            (
                function() 
                {
                    if($(this).val() == "1")
                    {
                        $('.div_buy').show('slow');
                        $('.div_rent').hide('slow');
                    }
                    else if($(this).val() == "2")
                    {
                        $('.div_buy').hide('slow');
                        $('.div_rent').show('slow');
                    }
                    else 
                    {
                        $('.div_buy').hide('slow');
                        $('.div_rent').hide('slow');
                    }
                }
            );
        }
    );
 </script>

要控制而不是冲突2选择添加输入文本（在完成测试时将更改为type =“hidden”）以获取pricefrom和princeuntil（购买和租赁）的恢复值

<input type="hidden" id="Pricefrom" value="0" name="Pricefrom">
<input type="hidden" id="Princeuntil" value="0" name="Princeuntil">

在值类更改时添加事件Jquery

$('.class_price').change
            (
                function () {
                if($('#selectcontract').val() == "1") //if buy
                    {
                        $('#Pricefrom').val($('#Pricefrom_buy').val()); //get value select
                        $('#Princeuntil').val($('#Princeuntil_buy').val()); //get value select

                    }
                    else if($('#selectcontract').val() == "2") //if rent
                    {
                        $('#Pricefrom').val($('#Pricefrom_rent').val()); //get value select
                        $('#Princeuntil').val($('#Princeuntil_rent').val()); //get value select
                    }
                    else {//if not select
                    $('#Pricefrom').val("0"); 
                    $('#Princeuntil').val("0");
                }
            }
        );

答案 1 :(得分：0)

静态列表

一个简单的小提琴概念证明。

https://jsfiddle.net/cgjjg2dy/

主要部分是：

$('#selectcontract').change(function (event) {
    $(".section").hide();
    $("#section" + $(this).val()).show();
});

我隐藏了所有部分，然后我显示了与所选选项相对应的部分。您也可以使用fadeOut()和fadeIn()来获得更好的效果！

AJAX

如果要从服务器/数据库动态检索选项，则必须使用AJAX。您只需进行AJAX调用并检索数据，然后根据需要修改DOM，而不是在.hide()处理程序中使用.show()和change()。相当复杂，但仍然是相同的想法。

Answer 2

静态列表

一个简单的小提琴概念证明。

https://jsfiddle.net/cgjjg2dy/

主要部分是：

$('#selectcontract').change(function (event) {
    $(".section").hide();
    $("#section" + $(this).val()).show();
});

我隐藏了所有部分，然后我显示了与所选选项相对应的部分。您也可以使用fadeOut()和fadeIn()来获得更好的效果！

AJAX

如果要从服务器/数据库动态检索选项，则必须使用AJAX。您只需进行AJAX调用并检索数据，然后根据需要修改DOM，而不是在.hide()处理程序中使用.show()和change()。相当复杂，但仍然是相同的想法。

选择输入会更改第二个选择的值

2 个答案:

静态列表

AJAX