选择输入改变第二次选择的值

Select input changes the values of second select

本文关键字：选择 改变 输入 第二次      更新时间：2023-09-26

您好，第一个输入是

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

这个输入包含两个选项Buy和Rent。因此，我希望当您选择Buy(例如)填充第二个和第三个输入的值时，如果您选择Rent(租用)填充完全相同的输入，但具有不同的值和值名称。

这里是第二个和第三个输入:

Second Select:

<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的东西，因为当您选择购买或租用时，应该进行更改。

可以创建一个用于buy的div和一个用于rent的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显示和隐藏根据select:

 <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");
                }
            }
        );

静态列表

一个简单的概念验证。

https://jsfiddle.net/cgjjg2dy/

主要部分是:

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

隐藏所有部分，然后显示与所选选项对应的部分。你还可以用fadeOut()和fadeIn()做得更花哨!

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