Question

我正在一个有关旅行的网站上，我需要从“路线容器” div中选择路线，然后在我的两个选择选项中都显示这些路线。第一种选择是出发，第二种选择是到达城市。这是我的代码盘。 https://codepen.io/anon/pen/GXVyqj

 <html>
    <head> 
    <style>
    .route-container {
      background-color:grey;
      width:30%;
      margin-top:10px;
    }
    </style>
    </head>
<body>
    <select>
        <option value="">Islamabad</option>
        <option value="">Lahore</option>
        <option value="">Karachi</option>
    </select>
    <select>
        <option value="">Karachi</option>
        <option value="">Lahore</option>
        <option value="">Queta</option>

    </select>
    <div class="container route-container"> 
      <b>Select your Route </b>
      <p>Islamabad-Lahore</p>
      <p>Karachi-Lahore</p>
      <p>Lahore-Queta</p>
    </div>
 </body>
</html>

Answer 1

这很丑陋，但是可以。如果定义更好的选择器并为option元素设置值，将会更好。

注意：我从.route-container div中进行事件委托。如果您的路线是静态的，那么您也可以使用正常事件。

$('.route-container').on('click', 'p', function() {
  var places = $(this).text().split('-');
  if (places.length === 2) {
    for (var i = 0; i < places.length; i++) {
      $($('select')[i]).children('option').each(function() {
        if ($(this).text() === places[i]) {
          $(this).prop('selected', true);
        }
      });
    }
  } else {
    console.error('no route found in clicked element');
  }
});

.route-container {
  background-color: grey;
  width: 30%;
  margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>
  <option value="">Islamabad</option>
  <option value="">Lahore</option>
  <option value="">Karachi</option>
</select>
<select>
  <option value="">Karachi</option>
  <option value="">Lahore</option>
  <option value="">Queta</option>
</select>
<div class="container route-container">
  <b>Select your Route </b>
  <p>Islamabad-Lahore</p>
  <p>Karachi-Lahore</p>
  <p>Lahore-Queta</p>
</div>

这是一种更漂亮的方法，但我对您的html做了一些改动。

$('.route-container').on('click', 'p', function() {
  var places = $(this).text().split('-');
  if (places.length === 2) {
    $('#startLocation').val(places[0]);
    $('#endLocation').val(places[1]);
  } else {
    console.error('no route found in clicked element');
  }
});

.route-container {
  background-color: grey;
  width: 30%;
  margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="startLocation">
  <option value="Islamabad">Islamabad</option>
  <option value="Lahore">Lahore</option>
  <option value="Karachi">Karachi</option>
</select>
<select id="endLocation">
  <option value="Karachi">Karachi</option>
  <option value="Lahore">Lahore</option>
  <option value="Queta">Queta</option>
</select>
<div class="container route-container">
  <b>Select your Route </b>
  <p class=route>Islamabad-Lahore</p>
  <p class=route>Karachi-Lahore</p>
  <p class=route>Lahore-Queta</p>
</div>

我需要从route-container div中选择路线并将其显示在选择选项中

1 个答案: