jqueryでselectで選んだ値を取得し他のselect内の文字列を変更する

Question

以下のようなselectboxが並んでいて
例えばselect name="key1"のoption value=aを選んだら
ほかの全てのselect内の値のaの前に●印をつけて、
select name="key2"のoption value=bを選んだら
今度はほかの全てのselect内の値のbの前に●印をつけるというふうに
jqueryでやる場合にはどうしたらよいのでしょうか？

<select name="key1" id="key_id1"> <option value="a">a</option> <option value="b">b</option> <option value="c">c</option> <option value="d">d</option> </select> <select name="key2" id="key_id2"> <option value="a">a</option> <option value="b">b</option> <option value="c">c</option> <option value="d">d</option> </select> <select name="key2" id="key_id2"> <option value="a">a</option> <option value="b">b</option> <option value="c">c</option> <option value="d">d</option> </select>

Answer 1

jQuery(function($) {
  var selectList = $("select");
  var optionList = selectList.children("option");
  selectList.on("change", function() {
    var selectedValue = $(this).val();

    optionList.each(function() {
      var optionObj = $(this);
      var optionLabel = optionObj.text().replace("●", "");
      optionObj.text(optionLabel);
      if (optionObj.val() == selectedValue) {
        optionObj.text("●" + optionLabel);
      }
    });
  });
});