'Showing data called into Select in DIV

I can't speak English well and I use google translate. If there is something you do not understand, please ask.

My problem is this: For example, in the code block I gave below, " input id="ilselect"

section gets the data from https://apicrow.com/address/select.js

What I actually want to do is this: input id="ilselect" do the same as what is written in the data brought into it. write in. How can I do that?

for instance ; when clicked and selected ISTANBUL I want it to show İSTANBUL here too.

select({
  ilListesi: "ilselect",
  ilceListesi: "ilceselect",
  mahalleListesi: "mahalleselect"
});
<!DOCTYPE html>
<html lang="tr">

<head>
  <meta charset="utf-8">
  <title>Türkiye Adres APİ</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- Çalışması için eklenmeli -->
  <script type="text/javascript" src="https://apicrow.com/adres/select.js" language="javascript"></script>
  <!-- Çalışması için eklenmeli -->
</head>

<body>
  <form method="POST" name="adrespost" class="adrespost" id="payment-form" action="anotherpage.php">
    <div class="select">
      <select id="ilselect">
      </select>
    </div>
    </br>
    <div class="select">
      <select id="ilceselect" name="ilceselect">
      </select>
    </div>
    </br>
    <div class="select">
      <select id="mahalleselect" name="mahalleselect">
      </select>
    </div>
    <div id="test"></div>
    </div>
    <center><button style="background:#076B79; color:white" class="btn" name="submit" id="submit" type="submit">ONAYLA</button></center>
  </form>
</body>

</html>
javascriptphphtml


Solution 1:[1]

You can add onchange event listener to listen changes in the select element.

let select = document.querySelector("#iselect");
let testDiv = document.querySelector("#test");
 
 // now add listener
 select.addEventListener("change",function(e){
    testDiv.textContent = e.target.value;
 })

You can also directly use onchange listener in html element.

<select onchange="document.querySelector('#test').textContent = this.value"> 
     <!-- option here -->
</select>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Anuj Kumar

Related Questions