Question

我对选择列表和所选属性有疑问。我已经完成了一些研究，但还没有找到可行的解决方案，所以我请大家提出意见，并提前感谢你。

这里发生了什么。当我点击两个单选按钮中的一个时，我希望这个选择允许我改变＆＃34;选择＆＃34;的位置。选项标签中的属性。我需要它来自：

<option value="_blank">Blank</option>

然后在选择外部单选按钮后更改为此。

<option value="_self" selected>Self</option>

希望这是有道理的，这就是它的样子。

HTML :(请注意，还有其他内容告诉它切换，我用它来选择目标链接源数据目标时进行检查）

<div class="form-group">
   <label for="link_source" class="generic-form__label">Link Source</label>
   <label class="radio"><input type="radio" name="link_source" value="internal" data-target="internal" checked> Internal</label>
   <label class="radio"><input type="radio" name="link_source" value="external" data-target="external"> External</label>
</div>

<div class="group">
  <label for="link-target" class="label">Link Target</label>
  <select name="link_target" id="link-target" class="input">
    <option value="_blank">Blank</option>
    <option value="_parent">Parent</option>
    <option value="_self">Self</option>
    <option value="_top">Top</option>
   </select>
</div>

jQuery的：基本上我已经尝试了这个，它适用于页面加载，但是当我尝试在内部和外部之间来回切换时，它不会切换，它保持在外部并选择空白。还有其他一些事情正在进行，例如设置变量目标，这是有效的。它记录正确的目标ID。

if (target === 'external') {
    $('select option[value="_blank"]').attr('selected', 'selected');
     console.log('it found ' + target)
     if (target !== 'interal') {
        $('select option[value="_blank"]').removeAttr('selected', 'selected');
     }
  }
  else if (target === 'internal'){
    $('select option[value="_self"]').attr('selected', 'selected');
    if (target !== 'external') {
        $('select option[value="_blank"]').removeAttr('selected', 'selected');
     }
    console.log('it found ' + target)
  }

为澄清而编辑

Answer 1

只需使用select的.val（）方法并为其赋值，它将根据jquery站点上的文档为您自动选择/取消选择选项。

Answer 2

选择中只有两个单选按钮，但有4个选项。基本上，您需要将选项的值存储在单选按钮的数据属性中。下面的代码可以帮助您入门：

HTML

<label class="radio"><input type="radio" name="link_source" value="internal" data-target="_self" checked> Internal</label>
<label class="radio"><input type="radio" name="link_source" value="external" data-target="_blank"> External</label>

JQuery的

$('input[type=radio][name=link_source]').on('change', function() {
  var selectValue = $(this).data('target');
  $('#link-target').val(selectValue).change();
});

尝试一下，如果您需要其他指示，请告诉我。

jQuery：如何在单击单选按钮的情况下切换选择列表选项中的select属性而不复制选择列表？

2 个答案: