選擇標記的更改如何觸發更改img的src？

Question

是否可以將根據您選擇的選項而變化的圖像放入選擇標記中？ 我需要更改select標記內與所選國家/地區匹配的國旗圖像。

Answer 1

概念證明就是這樣。

HTML

<select id="select" onchange="window.changeSrc(this);">
    <option value="https://www.funnyhoop.com/wp-content/uploads/2018/06/funny-animals-1-5.jpg">First</option>
    <option value="https://pbs.twimg.com/profile_images/821849411991044096/lQFa_Vly_400x400.jpg">Second</option>
</select>
<img src="" id="img"
</body>

使用Javascript

window.changeSrc = function(that) {
    document.getElementById("img").src = that.value;
}
window.changeSrc(document.getElementById('select'));

小提琴： https : //jsfiddle.net/2tsv3uLq/

說明

您需要一個select標簽和一個img標簽。 select標簽的更改將更改img標簽的src 。

Answer 2

好的，您可以這樣做。

需要更改：

HTML

您需要將選擇的內容包裝在這樣的容器中，並創建一個<img id="flag'>作為標記圖像。我們將更改JS中的源代碼。您需要此包裝器，以便您可以完全定位標記圖像根據此容器的相對位置，圖像將位於select標簽的頂部，而select標簽的左側將保留空白，以便為該圖像創建一些空間。

您還必須在每個選項上添加一個data-flag屬性。 這將保留與圖像名稱相同的值。 因此，如果您有一個名為Germany.jpg的圖像，則必須將Germany選項的data-flag設置為data-flag="Germany" 。

  <select id="select" name="cd-dropdown" class="cd-select" onchange="myFunction()">
  <!-- <option value="-1" selected>Currency</option>   -->
  <option data-flag="Germany" value="1" select>Germany </option>
  <option data-flag="Spain" value="2">Spain</option>
  <option data-flag="Barcelona" value="3">Barcelona</option>
  <option data-flag="Sweden" value="4">Sweden</option>
  </select>
</div>

CSS

設置相對於包裝器的位置，並將下邊距從選擇區域移到該包裝器。 將標志設置為在絕對位置上垂直於選擇項居中。 您可以根據需要更改標志的大小或位置。

.select-wrapper {
  position: relative;
  margin-bottom: 1em;
}

#flag {
  width: auto;
  height: 20px;
  display: block;
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
}

select {
  width: 13em;
  padding: .5em .

JS

唯一的新代碼段是我們為#flag img設置圖像源的位置。 $('#flag').attr("src", $(this).find(':selected').attr('data-flag') + ".svg"); 這將從選定選項的data-flag屬性中獲取文本，並將其添加為圖像的路徑。 在這種情況下，圖像必須與JS文件放在同一目錄中。 您必須根據您的文件夾結構更改此設置！

例：

$('#flag').attr("src", "../images" + $(this).find(':selected').attr('data-flag') + ".svg");

$(function firstFunction() {
  $('.pr-price').hide();
  $('.d2').show();
  $('#flag').attr("src", $(this).find(':selected').attr('data-flag') + ".svg");

  $('#select').on("change", function () {
    $('.pr-price').hide();
        $('.d' + $(this).val()).show();
        $('#flag').attr("src", $(this).find(':selected').attr('data-flag') + ".svg");
  }).val("1");
});
function myFunction() {
  var language = document.getElementById("select").value;
  sessionStorage.setItem("marketcode", language);
}

最終代碼段在此處（我對CSS進行了一些更改，因為您的SASS引用了一些您的樣式中未定義的變量）

忽略代碼段錯誤，由於源文件不可用，它們會彈出。

 $(function firstFunction() { $('.pr-price').hide(); $('.d2').show(); $('#flag').attr("src", $(this).find(':selected').attr('data-flag') + ".svg"); $('#select').on("change", function () { $('.pr-price').hide(); $('.d' + $(this).val()).show(); $('#flag').attr("src", $(this).find(':selected').attr('data-flag') + ".svg"); }).val("1"); }); function myFunction() { var language = document.getElementById("select").value; sessionStorage.setItem("marketcode", language); } 

 #global-en { padding-left: .5em; } #contact { float: right; padding-right: .5em; border-right: 1px solid #333; color: white; } .dropdown-toggle { color: #fff; } .px-4.py-3 { width: 15em; } .dropdown-heading { font-weight: 700; margin-bottom: .1em; } .inner-language-heading { font-weight: 700; } .btn-light { background-color: white; margin-bottom: 1.5em; width: 12em; } .btn-red { background-color: red; } .select-wrapper { position: relative; margin-bottom: 1em; } #flag { width: auto; height: 20px; display: block; position: absolute; top: 50%; left: 5px; transform: translateY(-50%); } select { width: 13em; padding: .5em .5em .5em 3em; } a { color: #333; } a:hover { text-decoration: underline; text-decoration-color: red; text-decoration-style: solid; } .dropdown-menu { width: 17em; } .save-changes { text-align: center; margin-left: 1em; } #dropdownMenu3 { margin-bottom: 3em; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="dropdown" id="global-en"> <a class="dropdown-toggle" href="#" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color: black;"> Global -EN </a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton" id="global-en"> <!-- DROPDOWN START --> <form class="px-4 py-3"> <!-- COUNTRY --> <p>Country</p> <!-- INNER DROPDOWN --> <div class="select-wrapper"> <img id="flag" /> <select id="select" name="cd-dropdown" class="cd-select" onchange="myFunction()"> <!-- <option value="-1" selected>Currency</option> --> <option data-flag="Germany" value="1" select>Germany </option> <option data-flag="Spain" value="2">Spain</option> <option data-flag="Barcelona" value="3">Barcelona</option> <option data-flag="Sweden" value="4">Sweden</option> </select> </div> <!-- LANGUAGE --> <p>Language</p> <div class="pr-price d1"> <div class="row"> <div class=".col-4 col-lg-4"> <p>Deutsch</p> </div> <div class=".col-4 col-lg-4"> <p>English</p> </div> <div class=".col-4 col-lg-4"> <p>Francoise</p> </div> </div> </div> <div class="pr-price d2"> <div class="row"> <div class=".col-4 col-lg-4"> <p>Spanish</p> </div> <div class=".col-4 col-lg-4"> <p>English</p> </div> <div class=".col-4 col-lg-4"> <p>Francoise</p> </div> </div> </div> <div class="pr-price d3"> <div class="row"> <div class=".col-4 col-lg-4"> <p>Mandarin</p> </div> <div class=".col-4 col-lg-4"> <p>English</p> </div> <div class=".col-4 col-lg-4"> <p>Francoise</p> </div> </div> </div> <div class="pr-price d4"> <div class="row"> <div class=".col-4 col-lg-4"> <p>Japanese</p> </div> <div class=".col-4 col-lg-4"> <p>English</p> </div> <div class=".col-4 col-lg-4"> <p>Francoise</p> </div> </div> </div> <!-- CURRENCY START --> <!-- <p>Currency</p> <div class="dropdown"> <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Euro </button> <div class="dropdown-menu" aria-labelledby="dropdownMenu2"> <button class="dropdown-item" type="button">Action</button> <button class="dropdown-item" type="button">Another action</button> <button class="dropdown-item" type="button">Something else here</button> </div> </div> --> <!-- CURRENCY END --> <button class="btn-red">Save changes</button> </form> <!-- DROPDOWN END --> </div> </div> <a id="contact" href="#">contact us</a> </div>