javascript - 选择输入更改第二个选择的值

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 7 年前。

Improve this question

你好，我有第一个输入

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

此输入包含 2 个选项“购买”和“租赁”。因此，我希望当您选择“购买敌人示例”来填充第二个和第三个输入的值时，如果您选择“租赁”来填充完全相同的输入，但使用不同的值和值名称。

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

第二个选择:

<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 和一个用于出租的类，并在展示后或隐藏它们 fiddle 示例:

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

Div Buy(有必要更改 name 属性以不重复)并添加 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");
                }
            }
        );