选择第一个选项后,更改选择中其他选项的值

时间:2015-02-13 10:07:10

标签: jquery

http://jsfiddle.net/tjede1nm/

我有两个选项,在输入框中显示所选选项的值。

我想要的是在选择其中一个下拉列表中的第一个选项后,其他选项应该在键盘值上更改为“0”。

例如,如果我选择“相机”,则两个下拉列表中的“钻石”和“太空船”的值应为“0”。

// Prevent choosing same option in both selects
$('select[name*="select-option"]').change(function(){
    var prize = $(this).find("option:selected").text();

    $('select[name*="select-option"]').not(this).each(function(){
        $('option', this).each(function(){
            if( $(this).text() == prize ){
                $(this).prop('disabled',true);
            }
        });
    });
});

// Show values in input
$("#cd-dropdown0").change(function()
{
  $("#id_search0").val($(this).val());
  $("#id_search0").keyup();
});

$("#cd-dropdown1").change(function()
{
  $("#id_search1").val($(this).val());
  $("#id_search1").keyup();
});

// --------------------HELP-----------------------------

$('select[name*="select-option"]').bind("change keyup",function(){

var item = ("option:selected");

$('option').not(item).bind("each keyup",function()
{
    $(this).val('0');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" name="search" value="" id="id_search0" disabled/>        

<select id="cd-dropdown0" class="cd-select" name="select-option">
	<option value="0" selected>Choose your prize</option>
	<option value="1" class="search-btn" data-search="camera">Camera</option>
	<option value="2" class="search-btn" data-search="diamonds">Diamonds</option>
	<option value="3" class="search-btn" data-search="spaceship">Spaceship</option>
</select>
<br>
<input type="text" name="search" value="" id="id_search1" disabled/>    
<select id="cd-dropdown1" class="cd-select" name="select-option">
	<option value="0" selected>Choose your prize</option>
	<option value="1" class="search-btn" data-search="camera">Camera</option>
	<option value="2" class="search-btn" data-search="diamonds">Diamonds</option>
	<option value="3" class="search-btn" data-search="spaceship">Spaceship</option>
</select>

1 个答案:

答案 0 :(得分:0)

  $('option', this).each(function () {
            if ($(this).text() == prize) {
                $(this).prop('disabled', true);
            } else {
               //Set value of options to 0 in both dropdowns where value not equal to selected value
                $('select[name*="select-option"] option[value="' + $(this).val() + '"]').val('0');
            }
        });

JSFiddle