交换HTML 使用JavaScript值

Question

我已经试过各种方法，试图交换两个选项，并没有奏效。

我想select的第一个选项与select1的第一选项交换

有没有人能提供如何应对这种交换的例子吗？

以下是我已经尝试了JavaScript的：

$('#swap').click(function() {
  var v1 = $('#select').val(),
    v2 = $('#select1').val();
  $('#select').val(v2);
  $('#select1').val(v1);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search-tour__converter">
  <form action="#" class="search-tour__form flex">
    <div class="search-tour__form_left-side">
      <input type="number" id="amount" value="1" class="search-tour__input">
      <div class="search-tour__drop-down">
        <select id="select" class="main-dropdown">
          <option value="EUR">EUR</option>
          <option value="EUR">EUR</option>
          <option value="USD">USD</option>
          <option value="UAH">UAH</option>
        </select>
      </div>
    </div>
    <button class="search-tour__btn" value="swap" id="swap" type="button">Swap
                </button>
    <div class="search-tour__form_right-side">
      <div class="search-tour__drop-down">
        <select id="select1" class="main-dropdown">
          <option value="UAH">UAH</option>
          <option value="UAH">UAH</option>
          <option value="USD">USD</option>
          <option value="EUR">EUR</option>
        </select>
      </div>
      <input type="number" id="result" value="31.37" class="search-tour__input">
    </div>
    <input type="button" class="titles-block__btn" value="Конвертировать" onclick="calculate();">
  </form>
</div>

Answer 1

你们是不是要做到以下几点？

$('#swap').click(function()
{
    var v1 = $('#select option:first-child');
    var v2 = $('#select1 option:first-child');
    

    var temp1 = v1.html();
    var temp2 = v2.html();

    v2.html(temp1);
    v1.html(temp2);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search-tour__converter">
        <form action="#" class="search-tour__form flex">
            <div class="search-tour__form_left-side">
                <input type="number" id="amount" value="1" class="search-tour__input">
                <div class="search-tour__drop-down">
                    <select id="select" class="main-dropdown">
                        <option value="EUR">EUR</option>
                        <option value="USD">USD</option>
                        <option value="UAH">UAH</option>
                    </select>
                </div>
            </div>
            <button class="search-tour__btn" value="swap" id="swap" type="button">Swap
            </button>
            <div class="search-tour__form_right-side">
                <div class="search-tour__drop-down">
                    <select id="select1" class="main-dropdown">
                        <option value="UAH">UAH</option>
                        <option value="USD">USD</option>
                        <option value="EUR">EUR</option>
                    </select>
                </div>
                <input type="number" id="result" value="31.37" class="search-tour__input">
            </div>
            <input type="button" class="titles-block__btn" value="Конвертировать" onclick="calculate();">
        </form>
    </div>