Question

我的jquery代码有两个下拉框，一个包含国家，另一个包含货币。所以我希望每当在框中选择一个国家时，它将触发一个更改功能，将使用if-else执行一些比较并将在另一个下拉列表中选择货币，并将其保留为“已禁用”＃39;为true.Below是我的相同代码：

＆＃13;

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            
            $(".select").change(function () {
                debugger;
               
                var c = $('#country :selected').text();
                if (c == 'india') {
                    $('select[name="currency"]').find('option[value="1"]').attr("selected", true);
                    document.getElementById('disable').disabled = true;
                }
                else
                {
                    $('select[name="currency"]').find('option[value="2"]').attr("selected", true);
                    document.getElementById('disable').disabled = true;
                }
            });

        });
       //$(function () {
       //    var select = $('select.select');
       //    select.change(function () {
       //        select.not(this).val(this.value);
       //        document.getElementById("disable").disabled = true;
       //    });
       //});
    </script>
</head>
<body>
    <form>
        <select name="country" id="country" class="select">
            <option value="">Select</option>
            <option value="1">india</option>
            <option value="2">America</option>
        </select>
        <select name="currency" id="disable" class="select">
            <option value="">Select</option>
            <option value="1">INR</option>
            <option value="2">DOLLAR</option>
        </select>
        <br><br>

    </form>
</body>
</html>

＆＃13;

但现在的问题是，当我选择india时，它显示IR，这是好的，然后当我选择America时，它会显示Doller，最后问题就出现了，当我再次将国家改回印度时，不会调用更改功能在所有和美元得到保持选择和禁用。这将是一个很大的帮助！

Answer 1

使用.prop代替.attr

使用.attr时，options都设置了selected属性，因此浏览器无法确定将哪个选项设置为selected。

从docs，要检索和更改DOM属性，例如表单元素的已选中，已选中或已禁用状态，请使用.prop（）方法。 （{ {1}}方法在检索某些属性时有时会考虑属性值，这可能会导致行为不一致。）

.attr()

$(document).ready(function() {
  $(".select").change(function() {
    var c = $('#country :selected').text();
    if (c == 'india') {
      $('select[name="currency"]').find('option[value="1"]').prop("selected", true);
    } else {
      $('select[name="currency"]').find('option[value="2"]').prop("selected", true);
    }
    document.getElementById('disable').disabled = true;
  });
});

Answer 2

由于select上的值都相同。您可以根据第一个{。}轻松设置第二个select的值。

＆＃13;

$(function() {
  $('.select').on('change',function() {
    var val = $(this).find(':selected').val();
    $('[name=currency]').val( val ).attr('disabled',true);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select name="country" id="country" class="select">
    <option value="">Select</option>
    <option value="1">india</option>
    <option value="2">America</option>
  </select>
  <select name="currency">
    <option value=""> </option>
    <option value="1">INR</option>
    <option value="2">DOLLAR</option>
  </select>

</form>

＆＃13;

Answer 3

要完成上述答案，您可以使用“$”jquery选择器代替document.getElementById

另请注意，您可以使用.prop('disabled', false); 也是这样：

$(document).ready(function() {
  $(".select").change(function() {
    var c = $('#country :selected').text();
    if (c == 'india') {
      $('select[name="currency"]').find('option[value="1"]').prop("selected", true);
    } else {
      $('select[name="currency"]').find('option[value="2"]').prop("selected", true);
    }
    $(#'disable').prop('disabled', true);
  });
});

每当选择下拉列表中的文本时，我都需要触发更改功能

3 个答案: