Railsのフォームで、1つのメソッドに入っているパラメータを送信したい

前提・実現したいこと

Railsで複数のドロップダウンリストから入力された値を送信したいです(うち1つしか入力できない想定)

発生している問題・エラーメッセージ

https://codepen.io/momosetkn/pen/JMQKKM
をまねて

erb
1<div class="pulldownset">
2  <%= f.label :city, class: 'label-required' %>
3  <select class="mainselect form-control">
4    <option value="kobe">こうべ</option>
5    <option value="hokkaido">hokkaido</option>
6  </select>
7  <%= f.select :city, 
8      [
9        "神戸市",
10        "姫路市"
11        "加古川市"
12      ], 
13      { prompt: "選択してください" }, { id: "kobe" } 
14  %>
15  <%= f.select :city, 
16      [
17        "札幌市",
18        "旭川市"
19        "苫小牧市"
20      ], 
21      { prompt: "選択してください" }, { id: "hokkaido" } 
22  %>
23</div>

js
1document.addEventListener('DOMContentLoaded', function() {
2   var allSubBoxes = document.getElementsByClassName("subbox");
3   for( var i=0 ; i<allSubBoxes.length ; i++) {
4      allSubBoxes[i].style.display = 'none';
5   }
6   var mainBoxes = document.getElementsByClassName('pulldownset');
7   for( var i=0 ; i<mainBoxes.length ; i++) {
8      var mainSelect = mainBoxes[i].getElementsByClassName("mainselect");
9      mainSelect[0].onchange = function () {
10         var subBox = this.parentNode.getElementsByClassName("subbox");
11         for( var j=0 ; j<subBox.length ; j++) {
12            subBox[j].style.display = 'none';
13         } 
14         if( this.value ) {
15            var targetSub = document.getElementById( this.value );
16            targetSub.style.display = 'inline';
17         }
18      }
19   }
20  });

上記のようなコードになったのですが、北海道の市を選択した際は問題なくパラメータが入るのですが、神戸を選択した際は空になってしまいます。
おそらく同じ Hoge.cityに値を入れようとして、加古川市などを選択した際はあとから北海道のほうの何も入っていないというデータで上書きされてしまうからだと思うのですが、回避する方法はありますでしょうか？