Получить выбранное значение из выпадающего списка div

ProgramBox

Получить выбранное значение из выпадающего списка div

Post author:admin
Запись опубликована:27 марта, 2023
Post category:Вопросы по программированию

#javascript #html

#javascript #HTML

Вопрос:

У меня есть выпадающий список, из которого я хочу найти выбранное значение. Выпадающий список — это в основном большая синяя кнопка, которая при нажатии показывает разных клиентов:

При нажатии на опцию значение изменяется на выбранного клиента.

Что я хочу сделать, так это получить доступ к этому значению где-нибудь еще в моем HTML-скрипте.

 var Klanten = [
  'niet-declareerbaar',
  'ING',
  'NNPC',
  'Meewind',
];
var Projects = [
  'alm',
  'risicobeheer',
  'RQ',
  'overige',
];
var Tarieven = [
  'standaard tarief',
  'korting (50%)',
  'Cadeau',
]


var project = 'overig';
var Tarief = 'standaard tarief';
var startYear = 2000;
var endYear = 2020;
var klant = 0;
var year = 0;
var selectedDays = new Array();
var mousedown = false;
var mousemove = false;

function loadKlanten() {
  for (var i = 0; i < Klanten.length; i  ) {
    var doc = document.createElement('div');
    doc.innerHTML = Klanten[i];
    doc.classList.add('dropdown-item');

    doc.onclick = (function () {
      var selectedKlant = i;
      return function () {
        klant = selectedKlant;
        document.getElementById('curKlant').innerHTML = Klanten[klant];
        loadCalendarDays();
        return klant;
      };
    })();

    document.getElementById('Klanten').appendChild(doc);
  }
}

function loadProjects() {
  document.getElementById('Projects').innerHTML = '';

  for (var i = 0; i < Projects.length; i  ) {
    var doc = document.createElement('div');
    doc.innerHTML = Projects[i];
    doc.classList.add('dropdown-item');

    doc.onclick = (function () {
      var selectedProject = i;
      return function () {
        project = selectedProject;
        document.getElementById('curProject').innerHTML = Projects[project];
        loadProjects();
        return project;
      };
    })();

    document.getElementById('Projects').appendChild(doc);
  }
}

function loadTarief() {
  document.getElementById('Tarieven').innerHTML = '';

  for (var i = 0; i < Tarieven.length; i  ) {
    var doc = document.createElement('div');
    doc.innerHTML = Tarieven[i];
    doc.classList.add('dropdown-item');

    doc.onclick = (function () {
      var selectedTarief = i;
      return function () {
        Tarief = selectedTarief;
        document.getElementById('curTarief').innerHTML = Tarieven[Tarief];
        loadTarief();
        return Tarief;
      };
    })();

    document.getElementById('Tarieven').appendChild(doc);
  }
}

var start_hour=0;
var end_hour = 10;
var hour = 0;

function loadHours() {
  document.getElementById('hours').innerHTML = '';

  for (var i = start_hour; i <= end_hour; i  ) {
    var doc = document.createElement('div');
    doc.innerHTML = i;
    doc.classList.add('dropdown-item');

    doc.onclick = (function () {
      var selectedHour = i;
      return function () {
        hour = selectedHour;
        document.getElementById('curHour').innerHTML = hour;
        loadHours();
        return hour;
      };
    })();

    document.getElementById('hours').appendChild(doc);
  }
}



function loadCalendarYears() {
  document.getElementById('years').innerHTML = '';

  for (var i = startYear; i <= endYear; i  ) {
    var doc = document.createElement('div');
    doc.innerHTML = i;
    doc.classList.add('dropdown-item');

    doc.onclick = (function () {
      var selectedYear = i;
      return function () {
        year = selectedYear;
        document.getElementById('curYear').innerHTML = year;
        loadCalendarDays();
        return year;
      };
    })();

    document.getElementById('years').appendChild(doc);
  }
}

function loadCalendarDays() {
  document.getElementById('calendarDays').innerHTML = '';

  var tmpDate = new Date(year, month, 0);
  var num = daysInMonth(month, year);
  var dayofweek = tmpDate.getDay()-1; // find where to start calendar day of week

  for (var i = 0; i <= dayofweek; i  ) {
    var d = document.createElement('div');
    d.classList.add('day');
    d.classList.add('blank');
    document.getElementById('calendarDays').appendChild(d);
  }

  for (var i = 0; i < num; i  ) {
    var tmp = i   1;
    var d = document.createElement('div');
    d.id = 'calendarday_'   tmp;
    d.className = 'day';
    d.innerHTML = tmp;
    d.dataset.day = tmp;

    d.addEventListener('click', function () {
      this.classList.toggle('selected');

      if (!selectedDays.includes(this.dataset.day))
        selectedDays.push(this.dataset.day);
      else selectedDays.splice(selectedDays.indexOf(this.dataset.day), 1);
    });

    d.addEventListener('mousemove', function (e) {
      e.preventDefault();
      if (mousedown) {
        this.classList.add('selected');

        if (!selectedDays.includes(this.dataset.day))
          selectedDays.push(this.dataset.day);
      }
    });

    d.addEventListener('mousedown', function (e) {
      e.preventDefault();
      mousedown = true;
    });

    d.addEventListener('mouseup', function (e) {
      e.preventDefault();
      mousedown = false;
    });

    document.getElementById('calendarDays').appendChild(d);
  }

  var clear = document.createElement('div');
  clear.className = 'clear';
  document.getElementById('calendarDays').appendChild(clear);
}

function daysInMonth(month, year) {
  var d = new Date(year, month   1, 0);
  return d.getDate();
}

window.addEventListener('load', function () {
  var date = new Date();
  month = date.getMonth();
  year = date.getFullYear();
  document.getElementById('curKlant').innerHTML = Klanten[klant];
  document.getElementById('curTarief').innerHTML = Tarief;
  document.getElementById('curHour').innerHTML = hour;
  document.getElementById('curProject').innerHTML = project;
  loadProjects();
  loadKlanten();
  loadTarief();
  loadCalendarDays();
  loadHours();
});

 body,
* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  
}
.calendar {
  background-color: white;
  padding: 20px;
  
  
}

.calendar .dropdown {
  display: none;
  position: absolute;
  background-color: #fff;
  color: #0047bA;
  text-align: center;
  font-size: 14pt;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 30px;
  padding-right: 30px;
  width: 160px;
  left: 0px;
  z-index: 2000;
}

.calendar .dropdown .dropdown-item {
  cursor: pointer;
  opacity: 0.7;
  transition: 0.5s opacity;
}

.calendar .dropdown .dropdown-item:hover {
  opacity: 1;
}

.calendar .hours{
  display: none;
}

.calendar .tarief {
  display: none;
}

.calendar .title {
  text-align: center;
  font-size: 20pt;
}

.calendar .calendar-btn {
  float: left;
  background-color: #0047bA;
  color: white;
  text-align: center;
  font-size: 14pt;
  padding-top: 5px;
  padding-bottom: 5px;
  position: relative;
  width: 20%;
  cursor: pointer;
  transition: 0.5s background-color;
}
.calendar .month-btn {
  width: 40%;
  height: 55px;
}

.calendar .project-btn {
  height: 55px;
}

.calendar .calendar-btn:hover {
  background-color: #1f71a1;
}
.calendar .hours-btn{
  float: middle;
  height: 55px;
}

.calendar .tarief-btn {
  float: left;
  height: 55px;
}

.calendar .calendar-dates .days .day {
  float: left;
  width: 12%;
  margin: 1%;
  padding: 1%;
  font-size: 13pt;
  text-align: center;
  border-radius: 10px;
  border: solid 1px #ddd;
}

.calendar .calendar-dates .days .day.blank {
  background-color: white;
  border: none;
}

.calendar .calendar-dates .days .day.selected {
  background-color: #0047bA;
  color: white;
  cursor: pointer;
  opacity: 0.9;
  transition: 0.1s opacity;
}

.calendar .calendar-dates .days .day.selected:hover {
  opacity: 1;
}

.calendar .calendar-dates .days .day.label {
  height: 40px;
  background-color: white;
  color: black;
  border: none;
  font-weight: bold;
}

.clear {
  clear: both;
}

@media only screen and (max-width: 960px) {
  .calendar {
    width: 100%;
    margin: 0px;
    margin: 0px;
    box-sizing: border-box;
    position: relative;
    left: 0px;
  }
}

 <!DOCTYPE html>
<div>
<html>
<div>
<head>

  <!-- CSS property to place div 
            side by side -->
  <style>
    #middlebox {
      float: left;
      width: 65%;
      height: 400px;
    }

    #rightbox {
      float: right;
      background-color: white;
      width: 35%;
      height: 450px;
    }

    h1 {
      color: green;
      text-align: center;
    }
  </style>
</head>
<div>

<div id="middlebox">

  <body>

    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title></title>
      <meta charset="utf-8">
      <link href="/static/calendar3.css" rel="stylesheet">
    </head>

    <body>

      <div class="calendar" id="calendar">
        
        <div class="calendar-btn month-btn" onclick="$('#Klanten').toggle('fast')">
          <span id="curKlant"></span>
          <div id="Klanten" class="months dropdown"></div>
        </div>
        

        <div class="calendar-btn project-btn" onclick="$('#Projects').toggle('fast')">
          <span id="curProject"></span>
          <div id="Projects" class="projects dropdown"></div>
        </div>

        <div class="calendar-btn hours-btn" onclick="$('#hours').toggle('fast')">
          <span id="curHour"></span>
          <div id="hours" class="hours dropdown"></div>
        </div>

        <div class="calendar-btn tarief-btn" onclick="$('#Tarieven').toggle('fast')">
          <span id="curTarief"></span>
          <div id="Tarieven" class="Tarieven dropdown"></div>
        </div>

        <div class="clear"></div>

        <div class="calendar-dates">
          <div class="days">
            <div class="day label">MON</div>
            <div class="day label">TUE</div>
            <div class="day label">WED</div>
            <div class="day label">THUR</div>
            <div class="day label">FRI</div>
            <div class="day label">SAT</div>
            <div class="day label">SUN</div>

            <div class="clear"></div>
          </div>

          <div id="calendarDays" class="days">
          </div>
          
        </div>
        
        <html>

        <head>
          <style>
            .modal {
              display: none;
              /* Hidden by default */
              position: fixed;
              /* Stay in place */
              z-index: 1;
              /* Sit on top */
              left: 0;
              top: 0;
              width: 100%;
              /* Full width */
              height: 100%;
              /* Full height */
              overflow: auto;
              /* Enable scroll if needed */
              background-color: rgb(0, 0, 0);
              /* Fallback color */
              background-color: rgba(0, 0, 0, 0.4);
              /* Black w/ opacity */
            }

            .modal-content {
              background-color: #fefefe;
              margin: 15% auto;
              /* 15% from the top and centered */
              padding: 20px;
              border: 1px solid #888;
              width: 80%;
              /* Could be more or less, depending on screen size */
            }


            .close {
              color: #aaa;
              float: right;
              font-size: 28px;
              font-weight: bold;
            }

            .close:hover,
            .close:focus {
              color: black;
              text-decoration: none;
              cursor: pointer;
            }
          </style>
        </head>

        <body>
          <style>
            .myBtn {
              border: none;
              color: white;
              padding: 16px 32px;
              text-align: center;
              text-decoration: none;
              display: inline-block;
              font-size: 14px;
              margin: 4px 2px;
              transition-duration: 0.2s;
              cursor: pointer;
            }

            .myBtn1 {
              background-color: white;
              color: black;
              border: 2px solid #0047bA;
            }

            .myBtn1:hover {
              background-color: #0047bA;
              color: white;
            }
          </style>
          <button id="myBtn" class="myBtn myBtn1">Uren indienen</button>
         
          <!-- The Modal -->
          <div id="myModal" class="modal">

            <!-- Modal content -->
            <div class="modal-content">
              <span class="close">amp;times;</span>
              <p>Je staat op het punt om je uren in te dienen, weet je zeker dat alles klopt?</p>
              <html>

              <head>
                <style>
                  .button {
                    border: none;
                    color: white;
                    padding: 16px 32px;
                    text-align: center;
                    text-decoration: none;
                    display: inline-block;
                    font-size: 14px;
                    margin: 4px 2px;
                    transition-duration: 0.2s;
                    cursor: pointer;
                  }

                  .button1 {
                    background-color: white;
                    color: black;
                    border: 2px solid #0047bA;
                  }

                  .button1:hover {
                    background-color: #0047bA;
                    color: white;
                  }
                </style>
              </head>

              <body>
                <a href="{{ url_for('schrijven') }}">
                  <button class="button button1">Ja, dien mijn uren in</button></a>
              </body>
            
            </div>
            
          </div>
          <script>
            var modal = document.getElementById("myModal");
            var btn = document.getElementById("myBtn");
            var span = document.getElementsByClassName("close")[0];
            btn.onclick = function() {
              modal.style.display = "block";
            }
            span.onclick = function() {
              modal.style.display = "none";
            }
            window.onclick = function(event) {
              if (event.target == modal) {
                modal.style.display = "none";
              }
            }
          </script>
        </body>

        </html>

      </div>

      <script type="text/javascript" src="/static/jscodes/jquery-3.5.1.min.js"></script>
      <script type="text/javascript" src="/static/jscodes/calendar3.js" async></script>

    </body>
</div>

<div class="card">
  <div class="rightbox_buttons" id="rightbox">

    <div>
      <h2>Welke uren heb ik geschreven?</h2>

    </div>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
body {font-family: Arial;}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
    </style>
    </head>
    <body>




<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'week')">Per week</button>
  <button class="tablinks" onclick="openCity(event, 'maand')">Per maand</button>
  <button class="tablinks" onclick="openCity(event, 'klant')">Per klant</button>
</div>

<div id="week" class="tabcontent">
  
  <p>Je hebt deze week geschreven: </p>
</div>

<div id="maand" class="tabcontent">
  
  <p>Je hebt deze maand geschreven:</p> 
</div>

<div id="klant" class="tabcontent">
  
  <html lang="en">
            <head>
            <meta charset="utf-8">
            <title>jQuery Get Selected Option Value</title>
            <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
            <script>
            $(document).ready(function(){
                $("select.klant").change(function(){
                    var selectedCountry = $(this).children("option:selected").val();
                    alert("You have selected the country - "   selectedCountry);
                });
            });
            </script>
            </head> 
            <body>
                <form>
                    <label>kies klant:</label>
                    <select class="klant">
                        {% for klant in klant %}
                        <option value="{{ klant }}" SELECTED>{{ klant }}</option>
                        {% endfor %}
                    </select>
                    <input type="text" size="30" name="display" id="display" />
                </form>
            </body>
</html>
</div>

<script>
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i  ) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i  ) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className  = " active";
}

</script>


   
</body>
</html>
    </div>
         
  </div>
</div>
</div>
</div>

</body>

</html>


{%endblock%}

Предпочтительно, я хочу сохранить выбранного клиента в новой переменной (чтобы я мог вернуть его в моем HTML) и использовать его позже. Как бы я мог это сделать?

Ответ №1:

Вы должны поместить приведенный ниже код, чтобы сохранить выбранное значение внутри переменной внутри события onclick.

var selected_Value= $(‘.dropdownid :selected’).val();

Вопрос:

Комментарии:

Ответ №1:

Вам также может понравиться

Вызов функции дочернего компонента из родительского компонента в Angular

Как я могу использовать эту переменную вне этой функции

Почему моя функция возвращает kotlin.Единица измерения, а не логическое значение?