Jquery: <select> with images, having trouble to handle response of two <select> separate-CodePudding

I am using online jquery to handle images in "select" element of HTML. But now I am facing trouble separating events on each "select" element.

var selectedId = "";
      var langArray = [];
      $(".box").each(function () {
        selectedId = $(this).attr("id");
        $(this)
          .find(".vodiapicker option")
          .each(function () {
            var img = $(this).attr("data-thumbnail");
            var text = this.innerText;
            var value = $(this).val();
            var item =
              '<li><img src="'  
              img  
              '" alt="" value="'  
              value  
              '"/><span>'  
              text  
              "</span></li>";
            langArray.push(item);
          });

        $(this).find("#a").html(langArray);

        //Set the button value to the first el of the array
        $(this).find(".btn-select").html(langArray[0]);
        $(this).find(".btn-select").attr("value", "en");
      });
      //change button stuff on click
      $("li").click(function () {
        var img = $(this).find("img").attr("src");
        var value = $(this).find("img").attr("value");
        var text = this.innerText;
        var item =
          '<li><img src="'   img   '" alt="" /><span>'   text   "</span></li>";
        $(".btn-select").html(item);
        $(".btn-select").attr("value", value);
        $(".b").toggle();
        //console.log(value);
      });

      $(".btn-select").click(function () {
        $(".b").toggle();
      });

      //check local storage for the lang
      var sessionLang = localStorage.getItem("lang");
      if (sessionLang) {
        //find an item with value of sessionLang
        var langIndex = langArray.indexOf(sessionLang);
        $(".btn-select").html(langArray[langIndex]);
        $(".btn-select").attr("value", sessionLang);
      } else {
        var langIndex = langArray.indexOf("ch");
        $(".btn-select").html(langArray[langIndex]);
        //$('.btn-select').attr('value', 'en');
      }

      .vodiapicker {
        display: none;
      }

      #a {
        padding-left: 0px;
      }

      #a img,
      .btn-select img {
        width: 18px;
      }

      #a li {
        list-style: none;
        padding-top: 5px;
        padding-bottom: 5px;
      }

      #a li:hover {
        background-color: #f4f3f3;
      }

      #a li img {
        margin: 5px;
      }

      #a li span,
      .btn-select li span {
        margin-left: 30px;
      }

      /* item list */

      .b {
        display: none;
        width: 100%;
        max-width: 350px;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: 5px;
      }

      .open {
        display: show !important;
      }

      .btn-select {
        margin-top: 10px;
        width: 100%;
        max-width: 350px;
        height: 34px;
        border-radius: 5px;
        background-color: #fff;
        border: 1px solid #ccc;
      }

      .btn-select li {
        list-style: none;
        float: left;
        padding-bottom: 0px;
      }

      .btn-select:hover li {
        margin-left: 0px;
      }

      .btn-select:hover {
        background-color: #f4f3f3;
        border: 1px solid transparent;
        box-shadow: inset 0 0px 0px 1px #ccc;
      }

      .btn-select:focus {
        outline: none;
      }

      .lang-select {
        margin-left: 50px;
      }

<script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>
<div  id="one">
      <select >
        <option>Select one</option>
        <option value="en"  data-thumbnail="images/3.png">
          English
        </option>
        <option value="au" data-thumbnail="images/3.png">Engllish (AU)</option>
      </select>

      <div >
        <button  value=""></button>
        <div >
          <ul id="a"></ul>
        </div>
      </div>
    </div>
    <div  id="two">
      <select >
        <option>Select one</option>
        <option value="en"  data-thumbnail="images/3.png">
          french
        </option>
        <option value="au" data-thumbnail="images/3.png">french F</option>
      </select>

      <div >
        <button  value=""></button>
        <div >
          <ul id="a"></ul>
        </div>
      </div>
    </div>

When I click on a select element, both are opening and plus, the content on HTML is separate for both div, but when I click on select dropdown two, it shows the content of one as well.

CodePudding user response：

I think this should work for you

$(".box").each(function() {
  let selectedId = "";
  let langArray = [];
  selectedId = $(this).attr("id");
  $(this)
    .find(".vodiapicker option")
    .each(function() {
      let img = $(this).attr("data-thumbnail");
      let text = this.innerText;
      let value = $(this).val();
      let item =
        '<li><img src="'  
        img  
        '" alt="" value="'  
        value  
        '"/><span>'  
        text  
        "</span></li>";
      langArray.push(item);
    });

  $(this).find("#a").html(langArray);
  //Set the button value to the first el of the array
  $(this).find(".btn-select").html(langArray[0]);
  $(this).find(".btn-select").attr("value", "en");
});
//change button stuff on click
$("li").click(function() {
  let img = $(this).find("img").attr("src");
  let value = $(this).find("img").attr("value");
  let text = this.innerText;
  let item =
    '<li><img src="'   img   '" alt="" /><span>'   text   "</span></li>";

  $(this).parents("div.lang-select").find(".btn-select").html(item);
  $(this).parents("div.lang-select").find(".btn-select").attr("value", value);
  $(this).parents("div.lang-select").find(".b").toggle();
  //console.log(value);
});

$(".btn-select").click(function() {
  $(this).parents("div.lang-select").find(".b").toggle();
});

.vodiapicker {
  display: none;
}

#a {
  padding-left: 0px;
}

#a img,
.btn-select img {
  width: 18px;
}

#a li {
  list-style: none;
  padding-top: 5px;
  padding-bottom: 5px;
}

#a li:hover {
  background-color: #f4f3f3;
}

#a li img {
  margin: 5px;
}

#a li span,
.btn-select li span {
  margin-left: 30px;
}


/* item list */

.b {
  display: none;
  width: 100%;
  max-width: 350px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 5px;
}

.open {
  display: show !important;
}

.btn-select {
  margin-top: 10px;
  width: 100%;
  max-width: 350px;
  height: 34px;
  border-radius: 5px;
  background-color: #fff;
  border: 1px solid #ccc;
}

.btn-select li {
  list-style: none;
  float: left;
  padding-bottom: 0px;
}

.btn-select:hover li {
  margin-left: 0px;
}

.btn-select:hover {
  background-color: #f4f3f3;
  border: 1px solid transparent;
  box-shadow: inset 0 0px 0px 1px #ccc;
}

.btn-select:focus {
  outline: none;
}

.lang-select {
  margin-left: 50px;
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div  id="one">
  <select >
    <option>Select one</option>
    <option value="en"  data-thumbnail="images/3.png">
      English
    </option>
    <option value="au" data-thumbnail="images/3.png">Engllish (AU)</option>
  </select>

  <div >
    <button  value=""></button>
    <div >
      <ul id="a"></ul>
    </div>
  </div>
</div>
<div  id="two">
  <select >
    <option>Select one</option>
    <option value="en"  data-thumbnail="images/3.png">
      french
    </option>
    <option value="au" data-thumbnail="images/3.png">french F</option>
  </select>

  <div >
    <button  value=""></button>
    <div >
      <ul id="a"></ul>
    </div>
  </div>
</div>

I hope this helps

CodePudding user response：

Consider the following.

$(function() {
  function convertSelect(target) {
    var opts = $("option", target);
    var container = $("<div>", {
      class: "ui-selectmenu"
    }).insertAfter(target);
    // Move original inside container
    $(target).detach().appendTo(container).hide();

    var list = $("<ul>", {
      class: "ui-selectmenu-list collapsed"
    }).appendTo(container);
    opts.each(function(i, o) {
      // Make List Option
      $("<li>", {
        class: "ui-selectmenu-option"
      }).data("value", $(o).val()).html("<span>"   $(o).text()   "</span>").appendTo(list);
      // Select Original selected item
      if ($(o).is(":selected")) {
        $("li:last", list).addClass("selected");
      }
      // Add Thumbnail, if present
      if ($(o).data("thumbnail") != undefined) {
        $("li:last span", list).before("<img src='"   $(o).data("thumbnail")   "' alt='"   $(o).val()   "' />");
      }
    });

    if ($(".selected", list).length == 0) {
      // Default to Item 0 if none is selected in Original
      $("li", list).eq(0).addClass("selected");
    }
    // Psudeo Collapse
    $("li:not('.selected')", list).hide();

    $("li", list).click(function(event) {
      if ($(this).hasClass("selected") && list.hasClass("collapsed")) {
        // Exapnd Menu
        list.removeClass("collapsed");
        $("li", list).show();
        return false;
      }
      if ($(this).hasClass("selected") && !list.hasClass("collapsed")) {
        // Same Item selected, collapse
        $("li:not('.selected')", list).hide();
        list.addClass("collapsed");
        console.log("Selected", $(".selected", list).data("value"));
        return false;
      }
      // Menu Expanded, new Item selected
      $(".selected", list).removeClass("selected");
      $(this).addClass("selected");
      $("li:not('.selected')", list).hide();
      list.addClass("collapsed");
      console.log("Selected", $(".selected", list).data("value"));
    });
  }

  $(".vodiapicker").each(function() {
    convertSelect(this);
  });

  /*
  // localStorage not support in Snippet
    //check local storage for the lang
    var sessionLang = localStorage.getItem("lang");
    if (sessionLang) {
      //find an item with value of sessionLang
      var langIndex = langArray.indexOf(sessionLang);
      $(".btn-select").html(langArray[langIndex]);
      $(".btn-select").attr("value", sessionLang);
    } else {
      var langIndex = langArray.indexOf("ch");
      $(".btn-select").html(langArray[langIndex]);
      //$('.btn-select').attr('value', 'en');
    }
    */
});

.ui-selectmenu {
  background: #fff;
  width: 350px;
}

.ui-selectmenu-list {
  padding-left: 0px;
  margin-top: 10px;
  width: 100%;
  border-radius: 5px;
  border: 1px solid #ccc;
  z-index: 1001;
}

.ui-selectmenu-list li {
  background: #fff;
  list-style: none;
  padding-top: 5px;
  padding-bottom: 0px;
}

.ui-selectmenu-list li:hover {
  background-color: #f4f3f3;
}

.ui-selectmenu-list li img {
  width: 18px;
  margin: 5px;
}

.ui-selectmenu-list li span {
  margin-left: 30px;
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<select >
  <option>Select One</option>
  <option value="en"  data-thumbnail="images/3.png">English</option>
  <option value="au" data-thumbnail="images/3.png">Engllish (AU)</option>
</select>

<select >
  <option>Select One</option>
  <option value="en"  data-thumbnail="images/3.png">french</option>
  <option value="au" data-thumbnail="images/3.png">french F</option>
</select>

This works as you described. It also uses jQuery to hide the Select elements and build all the needed elements for a Select Menu with Images.