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

你好，我有第一个输入是

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

合同
购买
租

此输入包含购买和租赁两个选项。因此，我希望当您选择Buy foe示例来填充第二个和第三个输入的值时，如果您选择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>

价格来自
1.
500
1000
1500

第三选择：

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

价格至
500
1000
1500
2000

我应该朝哪个方向实现这个目标，有什么建议吗？我想这应该是jquery的特点，因为当您选择购买或租赁时，更改应该是中间的

静态列表 一个简单的小提琴概念证明

主要部分是：

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

我隐藏所有部分，然后显示与所选选项对应的部分。您还可以使用

fadeOut（）

和

fadeIn（）

获得更高的喜好

AJAX

---

如果要从服务器/数据库动态检索选项，必须使用AJAX。您不需要在

change（）

处理程序中使用

.hide（）

和

.show（）

，只需进行AJAX调用并检索数据，然后根据需要修改DOM即可。有点复杂，但仍然是相同的想法。

你可以创建一个div用于购买，另一个用于租赁，在课堂上和展示后或隐藏其内容 小提琴的例子：

Div Buy（需要将名称prop更改为不重复）并添加类“CLASS_price”

---

可以在纯javascript（和硬编码列表）中完成，也可以在ajax中完成（点击服务器获取列表，可能搜索数据库）…取决于您想做什么..太广泛了这看起来是一个很好的决定。在这种情况下，如果我有两个同名的select元素，这会与提交表单冲突吗？是的，提交时需要处理它们。您可以使用Php或jQuery来验证选择了哪个选项。我将通过jquery创建一个基本示例，并在瞬间更新代码。可以验证@JohnSiniger吗？好的，谢谢，我现在使用它只是需要选择哪个select可用于表单提交。很酷，如果可以帮助$（“form”）。在（“submit”，function（）{//function}）上，此函数在submit上运行；

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

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

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

$('.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");
                }
            }
        );