jQuery: How to toggle the select attribute in a select list's options on the click of a radio button without duplicating the select list?

Question

I have a question about select lists and the selected attribute. I've done some research and haven't found a solution that works yet, so I ask you folks for your input and thank you in advance.

Here's what's going on. When I click on one of two radio buttons, I would like that selection to allow me to change the position of the "selected" attribute in the option tags. I need it to go from:

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

and then change to this after the radio button for external is selected.

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

Hopefully that makes sense, here's what it looks like.

HTML: (note that there's other stuff going on that tells it to toggle, which I use to select the target link source data-target when it's checked)

<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: basically I've tried this, and it works on the page load, but when I try to toggle back and forth between internal and external, it doesn't switch, it stays on external and selects Blank. There are other things going on like setting that variable target, which works. It logs the correct target 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)
  }

EDITED FOR CLARITY

Answer 1

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

Answer 2

There are only two radio buttons but 4 options in the select. Basically you need to store the value of the option inside the radio button's data attribute. The code below should get you started:

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();
});

Try that out and let me know if you need additional instruction.