Bootstrap Dropdown with Value Hi Folks,
in my App I have a function where the judges can rate projects. Using this code
<div class="col-md-6">
<select class="form-control" name="vote" id="vote">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
</select>
</div>
<button type="submit" class="btn btn-primary" value = "vote" name="submit">
{{ __('Rate') }}
</button>
@endif
</form>
I have a dropdown and a button. As this solution works, but looks ugly, I learned, that there is a CSS in Bootstrap for a dropdown, but I cannot send values with that:
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
</div>
Is there a solution for sending values in the second dropdown?
Thanks for any advice!
Stefan
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">10</a></li>
<li><a href="#">20</a></li>
<li><a href="#">30</a></li>
</ul>
</div>
<input type='hidden' id='vote' value='' />
<script>
document.querySelectorAll('li').forEach( function(el) {
el.addEventListener('click', function() {
document.querySelector('.dropdown-toggle').innerText = el.textContent;
document.querySelector('#vote').value = el.textContent;
});
});
</script>
This is one way to do, I added one hidden input, so you can submit and php catch the value, and with JS I just change the text of the button and value of the input. Note that there are much better ways to do this :)
Please sign in or create an account to participate in this conversation.
