在通过javascript选择选项之前取消选择选项

Question

我遇到一个问题，我在表单中有多个选择按钮，并且在每个按钮上单击应该选择同一选择框的不同选项。如果我在onclick时传递一个值，则下面的代码工作正常，但如果没有传递值而不是将值设置为nul，则保留旧值。

在选择要刷新的选项之前尝试了formname.reset（），但这根本没有选择任何值。

例如，单击select1并选择第一个选择框值。单击select2而不是将其自身重置为null后，它将显示旧值（1）。 Select3再次正常工作，选择选择框的第二个值。

    <script>
      function editvalues(arr)
      {
        $('#parent_id option[value='+arr+']').attr('selected','selected');
      }
    </script>

    <a href="javascript:void(0);" onclick="editvalues(1)">Select1</a>
    <a href="javascript:void(0);" onclick="editvalues()">Select2</a>
    <a href="javascript:void(0);" onclick="editvalues(2)">Select3</a>

    <select id="parent_id" name="parent_id">
      <option value=''>Select Any</option>
      <option value='1'>First</option>
      <option value='2'>Second</option>
    </select>

Answer 1

如果没有传递参数，请将值设置为''。

$('#parent_id option[value='+(arr || '')+']').attr('selected','selected');

在上面的代码中，(arr || '')如果传递给函数，将返回arr。否则它将返回''（恰好是代表无选择的value的{​​{1}}。

Answer 2

在您的情况下使用val方法将解决问题：

function editvalues(arr) {
    $('#parent_id').val(arr);
}

但是你应该考虑使用jQuery more 而不是旧式内联处理程序方法。例如：

<a href="#" class="select" data-value="1">Select1</a>
<a href="#" class="select" data-value="">Select2</a>
<a href="#" class="select" data-value="2">Select3</a>

JS：

$('.select').on('click', function() {
    var val = $(this).data('value');
    $('#parent_id').val(val);
});

演示：http://plnkr.co/edit/iuFEjBKkQZZEpk8keaqx?p=preview

Answer 3

您可以取消选择任何选定的第一个：

function editvalues(arr)
  {
    //deselect 1st
    $("#parent_id option:selected").prop("selected", false)
    //then select passed in value
    $('#parent_id option[value='+arr+']').attr('selected','selected');
  }