如何将Mapbox商店定位器列表更改为下拉菜单并触发href链接

Question

需要一些有关Mapbox原始示例JS代码的建议或帮助，如何从这种和平的代码下拉列表而不是列表中赚钱？

想法是：将Mapbox商店定位器列表更改为下拉列表。任何帮助都很好，谢谢！

我更改了代码的某些部分，但是在下拉菜单中是链接，我需要触发此href链接以进行地图标记操作，在这里我需要一些帮助..

我有这个：（JS）

/**
   * Add a listing for each store to the sidebar.
  **/
  function buildLocationList(data) {
    data.features.forEach(function(store, i){
      /**
       * Create a shortcut for `store.properties`,
       * which will be used several times below.
      **/
      var prop = store.properties;

      /* Add a new listing section to the sidebar. */
      var listings = document.getElementById('listings');
      var listing = listings.appendChild(document.createElement('option'));
      /* Assign a unique `id` to the listing. */
      listing.id = "listing-" + prop.id;
      /* Assign the `item` class to each listing for styling. */
      listing.className = 'item';

      /* Add the link to the individual listing created above. */
      var link = listing.appendChild(document.createElement('a'));
      link.href = '#';
      link.className = 'title';
      link.id = "link-" + prop.id;
      link.innerHTML = prop.text;

      /* Add details to the individual listing. */
      var details = listing.appendChild(document.createElement('span'));
      details.innerHTML = prop.text;
      details.innerHTML = prop.address;

      /**
       * Listen to the element and when it is clicked, do four things:
       * 1. Update the `currentFeature` to the store associated with the clicked link
       * 2. Fly to the point
       * 3. Close all other popups and display popup for clicked store
       * 4. Highlight listing in sidebar (and remove highlight for all other listings)
      **/
      link.addEventListener('click', function(e){
        for (var i=0; i < data.features.length; i++) {
          if (this.id === "link-" + data.features[i].properties.id) {
            var clickedListing = data.features[i];
            flyToStore(clickedListing);
            createPopUp(clickedListing);
          }
        }
        var activeItem = document.getElementsByClassName('active');
        if (activeItem[0]) {
          activeItem[0].classList.remove('active');
        }
        this.parentNode.classList.add('active');
      });
    });
  } 

这里是：（html）

<div class='sidebar'>
  <select id='listings' class='listings'></select>
</div>

这是js做魔术后的html：

<div class="sidebar">
  <select id="listings" class="listings">
<option id="listing-0" class="item"><a href="#" class="title" id="link-0">store1</a><span>Address here</span></option>

........ here is more options .......
</div>

选择下拉菜单时需要触发<a href="#" class="title" id="link-0">store1</a>吗？！

Answer 1

您在选择选项内不能有链接。您可以做的是将链接作为数据属性写入选项。由于该示例不适用于堆栈代码段，因此这里是Fiddle。

$("select").on("change", function() {
  window.open($(this).find("option:selected").attr("data-link"), '_blank');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sidebar">
  <select id="listings" class="listings">
    <option value="0">Select store</option>
    <option id="listing-0" class="item" data-link="https://www.google.com">store1 Address here</option>
    <option id="listing-1" class="item" data-link="https://www.stackoverflow.com">store2 Address here</option>
  </select>
</div>

Answer 2

这是我想要的最终代码。希望它能帮助某人解决类似的问题;;））

我自定义的Mapbox JS的一部分代码：

/**
   * Add a listing for each store to the sidebar.
  **/
 function buildLocationList(data) {
    data.features.forEach(function(store, i){
      /**
       * Create a shortcut for `store.properties`,
       * which will be used several times below.
      **/
      var prop = store.properties;

      /* Add a new listing section to the sidebar. */
      var listings = document.getElementById('listings');
      var listing = listings.appendChild(document.createElement('span'));
      /* Assign a unique `id` to the listing. */
      listing.id = "listing-" + prop.id;
      /* Assign the `item` class to each listing for styling. */
      listing.className = 'item';

      /* Add the link to the individual listing created above. */
      var link = listings.appendChild(document.createElement('option'));
      link.href = '#';
      link.className = 'title';
      link.id = "link-" + prop.id;
      link.innerHTML = prop.address;

      document.getElementById('listings').addEventListener('change',function(){
            $(this).find('span').attr("data-link");
        });

      /**
       * Listen to the element and when it is clicked, do four things:
       * 1. Update the `currentFeature` to the store associated with the clicked link
       * 2. Fly to the point
       * 3. Close all other popups and display popup for clicked store
       * 4. Highlight listing in sidebar (and remove highlight for all other listings)
      **/
      link.addEventListener('click', function(e){
        for (var i=0; i < data.features.length; i++) {
          if (this.id === "link-" + data.features[i].properties.id) {
            var clickedListing = data.features[i];
            flyToStore(clickedListing);
            createPopUp(clickedListing);
          }
        }
        var activeItem = document.getElementsByClassName('active');
        if (activeItem[0]) {
          activeItem[0].classList.remove('active');
        }
        this.parentNode.classList.add('active');
      });
    });
  }

这是HTML的下拉菜单的一部分：

 <fieldset>
  <select id='listings' class='listings' name="some_txt_here" >
  <option selected>---select your place--</option>
</select>
  <label class="bars-txt" for="city">
    <span data-text="some_txt_here">some_txt_here</span>
  </label>
</fieldset>