Попытка изменить текст кнопки раскрывающегося списка начальной загрузки на выбранный элемент

ProgramBox

Попытка изменить текст кнопки раскрывающегося списка начальной загрузки на выбранный элемент

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

#javascript #html #button #bootstrap-4

#javascript #HTML #кнопка #bootstrap-4

Вопрос:

Я использую bootstrap для оформления кнопки выпадающего списка, и я хотел бы, чтобы текст кнопки изменился на любой элемент, выбранный из выпадающего списка. Я предполагаю, что JavaScript — лучший способ добиться этого, но я еще не настолько знаком с ним. Любая помощь была бы с благодарностью принята.
Вот мой html для первой кнопки выпадающего списка. Спасибо

     <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Genre
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
      <button class="dropdown-item" type="button">Adventure</button>
      <button class="dropdown-item" type="button">Sci-Fi</button>
      <button class="dropdown-item" type="button">Comedy</button>
    </div>

1. Вы правильно предположили: требуется некоторый javascript. Ничего серьезного. Прямо сейчас, хотя я не вижу попытки ввода кода. Вы надеялись на случайное полное решение?

2. Выпадающий список — это скорее меню. Действительно звучит так, как будто вы хотели бы использовать select здесь. Только мои 2 цента

3. Да, я попробовал пару вещей, которые не сработали, и не думал о том, чтобы включить их. Я включу свои попытки в следующий раз, когда обращусь за помощью.

Ответ №1:

@finiteloop спасибо за вашу помощь. Основываясь на направлении, в котором вы указали мне, я добавил событие onclick для каждого элемента выпадающего списка и добавил следующую функцию, которая делает то, что мне нужно:

 <div class="dropdown mx-3">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Genre
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
      <button class="dropdown-item" type="button" onclick="showGenre(this)">Adventure</button>
      <button class="dropdown-item" type="button" onclick="showGenre(this)">Sci-Fi</button>
      <button class="dropdown-item" type="button" onclick="showGenre(this)">Comedy</button>
    </div>
  </div>

 function showGenre(item) {
  document.getElementById("dropdownMenu1").innerHTML = item.innerHTML;
}

Ответ №2:

@MasterShake20 вы могли бы сделать что-то подобное и интегрировать это в свой код:

 <!DOCTYPE html>
<html>
<body>

<form>
  Select your favorite fruit:
  <select id="mySelect">
    <option value="apple">Apple</option>
    <option value="orange">Orange</option>
    <option value="pineapple">Pineapple</option>
    <option value="banana">Banana</option>
  </select>
</form>

<p>Click the button to change the selected fruit to banana.</p>

<button id="btnTxt" type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  
let buttonVal = document.getElementById("mySelect").value;
document.getElementById('btnTxt').innerHTML = buttonVal;
  
}
</script>

</body>
</html>

Посмотрите, как это работает здесь:
https://www.w3schools.com/code/tryit.asp?filename=GI7I2WCF1N82

Это не совсем то, что вы пытаетесь сделать, но это может направить вас в правильном направлении и дать вам представление о том, что должно произойти.

Кроме того, если вы только начинаете, W3 — отличный ресурс, поэтому ознакомьтесь с их руководствами по JavaScript здесь:https://www.w3schools.com/js/default.asp 😀

1. Спасибо, я проверю предоставленные вами ссылки, чтобы лучше понять, как выполнить то, что я ищу.

2. @MasterShake20 это звучит как хороший план! Если вы обнаружите, что это вам помогает, рассмотрите ли вы возможность пометить мой ответ как правильный? 🙂

Ответ №3:

с помощью jquery это просто:

 <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Number
</button>
<ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">1</a></li>
    <li><a class="dropdown-item" href="#">2</a></li>
    <li><a class="dropdown-item" href="#">3</a></li>
</ul>
<script>
    $(".dropdown-toggle").next(".dropdown-menu").children().on("click",function(){
        $(this).closest(".dropdown-menu").prev(".dropdown-toggle").text($(this).text());
    });
</script>

если у вас на странице больше компонентов и вы хотите, чтобы такое поведение применялось к конкретным компонентам,
добавьте свойство для исправления, выберите только его:
(в этом примере добавьте свойство changeable=»true»)

 <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" changeable="true">
    Number
</button>
<ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">1</a></li>
    <li><a class="dropdown-item" href="#">2</a></li>
    <li><a class="dropdown-item" href="#">3</a></li>
</ul>
<script>
    $(".dropdown-toggle[changeable=true]").next(".dropdown-menu").children().on("click",function(){
        $(this).closest(".dropdown-menu").prev(".dropdown-toggle").text($(this).text());
    });
</script>

Показать фрагмент кода

 $(".dropdown-toggle").next(".dropdown-menu").children().on("click", function() {
  $(this).closest(".dropdown-menu").prev(".dropdown-toggle").text($(this).text());
});

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Number
</button>
<ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">1</a></li>
    <li><a class="dropdown-item" href="#">2</a></li>
    <li><a class="dropdown-item" href="#">3</a></li>
</ul>