We Keep Coding

How to fetch the dropdown value in edit form using jquery?

I have a form with dropdown in it and when I am adding the data it is going to database. When I click on edit I can fetch the values of all other fields but the drop down is not showing the value which was added previously in the dropdown can some one please help ??
I am trying to do this with jquery ,
I am using semantic for frontend with jsp and servlet for the backend and database in postgres
this is what i have tried found this on semantic behavior but its only setting the value as default
$("#iddropdown").dropdown('set selected', ['fruits']);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" integrity="sha512-dqw6X88iGgZlTsONxZK9ePmJEFrmHwpuMrsUChjAw1mRUhUITE5QU9pkcSox+ynfLhL15Sv2al5A0LVyDCmtUw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" integrity="sha512-8bHTC73gkZ7rZ7vpqUQThUDhqcNFyYi2xgDgPDHc+GXVGHXq+xPjynxIopALmOPqzo9JZj0k6OqqewdGO3EsrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="eight wide field">
<label> Product Category </label>
<select id="iddropdown" class="ui dropdown" name="category">
<option value="category"> Category </option>
<option value="fruits"> Fruits </option>
<option value="vegetables"> Vegetables </option>
<option value="rice"> Rice </option>
<option value="flour"> Flour </option>
<option value="snacks"> Snacks </option>
<option value="beverages"> Beverages </option>
<option value="sauces"> Sauces </option>
<option value="cereal"> Cereal </option>
<option value="spices"> Spices </option>
<option value="pulses"> Pulses </option>
<option value="cheese"> Cheese </option>
</select>
</div>

$("#iddropdown").dropdown('set selected', ['${product.category}'] );
Finally this worked for me !!

Select2 dropdown- scrollbar isn't available

I am using Select2 for all my dropdown inputs, and applied the minimumResultsForSearch for 10 entries.
The list is of course scrollable, However, it doesn't seem to show any scrollbar (arrows) which may be misleading (some might think the items are just cut off).
I couldn't find any information regarding a scrollbar in the documentation.
Anybody has an idea how to add one?

With the basic of select2 there is no issue with the scroll-bar.
The issue will be somewhere in your CSS codding. You need to provide code to make use able to search for your issue.
Basic Select2 Example (first: no search field and second: search field)
$('#first').select2({
minimumResultsForSearch: 10
});
$('#second').select2({
minimumResultsForSearch: 10
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-beta.1/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<div style="padding: 50px;">
<div> 6 options available > No search bar (scroll works)</div>
<select id="first" class="selectdata form-control custom-select" style="width: 60%">
<option value="BE">Belgium</option>
<option value="USA">USA</option>
<option value="NL">Netherlands</option>
<option value="UK">United Kingdom</option>
<option value="GE">Germany</option>
<option value="FR">France</option>
</select>
<div style="padding-top: 25px;"> 11 options available > search bar available(scroll works)</div>
<select id="second" class="selectdata form-control custom-select" style="width: 60%">
<option value="BE">Belgium</option>
<option value="USA">USA</option>
<option value="NL">Netherlands</option>
<option value="UK">United Kingdom</option>
<option value="GE">Germany</option>
<option value="FR">France</option>
<option value="SP">Spain</option>
<option value="IT">Italy</option>
<option value="CH">China</option>
<option value="RU">Rusia</option>
<option value="LUX">Luxembourg</option>
</select>
</div>

materialize css select is not working properly

I am trying to use select field in materialize css. But it doesn't seems work properly
my code :
<div class="container">
<div class="row">
<div class="input-field s6">
<label >OS Version</label>
<select class="validate">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
</div>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('select').material_select();
});
</script>
And in this it is rendering a select field but label is still overlapping the select field. as shown in figure:
from http://materializecss.com/forms.html i have inspected where i founf this :
<div class="select-wrapper">
<span class="caret">▼</span>
<input class="select-dropdown" readonly="true" data-activates="select-options-6162e8f3-f286-fe44-8513-ab1ff6541fb1" value="Choose your option" type="text">
<ul style="width: 358px; position: absolute; top: 0px; left: 0px; opacity: 1; display: none;" id="select-options-6162e8f3-f286-fe44-8513-ab1ff6541fb1" class="dropdown-content select-dropdown">
<li class="disabled"><span>Choose your option</span></li>
<li class=""><span>Option 1</span></li>
<li class=""><span>Option 2</span></li>
<li class=""><span>Option 3</span></li>
</ul>
<select class="initialized">
<option value="" disabled="" selected="">Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
and from my code i am getting this from inspect:
<div class="select-wrapper">
<span class="select-dropdown " data-activates="select-options-fdd5c3a3-b6d7-07f2-6626-df40620c20cc">Choose your option</span>
<select class="validate initialized">
<option value="" disabled="" selected="">Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
Missing UL element is rendering below all the div, which mean above my footer.. where i am going wrong?
Fiddle : https://jsfiddle.net/007zkvut/

I updated your jsfiddle because it was loading Materialize before jQuery, so $() was not defined.
Here is the link:
https://jsfiddle.net/007zkvut/7/
It is working properly, just like in their website.
However, looking at the code you posted in your question and the code in your jsfiddle, there is a difference in the placement of <label>
In my updated jsfiddle I put another select to illustrate the difference between the different <label> placements. Just make sure it is after <select>

I have fixed the issues of select drop-down.
Please check the demo.
https://jsfiddle.net/007zkvut/9/
Your demo:
https://jsfiddle.net/007zkvut/8/
$(document).ready(function() {
$('select').material_select();
});
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="input-field s6">
<select class="browser-default waves-effect waves-light btn">
<option value="" disabled="" selected="">Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
</div>

I experienced this problem too because my view was autogenerating from the javascript code. I solved this by calling the select() function from a setTimeout and after the code that generates the select DOM and it worked.
setTimeout(function(){$('select').material_select();},1000);
This same trick will also work for the materialize datepicker. just do.
setTimeout(function(){$('.datepicker').pickadate();},2000)

Well you can use the following code:
<div class="input-field col s12 m6">
<select class="initialized">
<option value="" disabled="" selected="">Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Select</label>
</div>
and, in your javascript file you need to put the next code:
(function($){
$(function(){
$(document).ready(function() {
$('select').material_select();
});
});
})(jQuery);
and ta chan!, it works.

Place the label after the select tag. It should do the trick.

Trying to have 2 drop down comboboxes that have the same function

How can I have 2 drop down combo boxes on the same page?
here is what I have now:
<div class="ui-widget" >
<p> <label>test: </label></p>
<select id="combobox">
<option value="">Select one...</option>
<option value="first">first</option>
<option value=">second">second</option>
</select>
<button style = "margin-left:35px;"type="button" onclick="f1()">Go!</button>
</div>
...
<div class="ui-widget">
<select id="combobox">
<option value="">Select one...</option>
<option value="test">test</option>
<option value="test2">test2</option>
</select>
</div>
I am pretty sure I am not able to have 2 of the same id's like I do. Right now the first one works but the second doesnt. How can I fix this?
Im using this dropdown http://jqueryui.com/autocomplete/#combobox

Using the same ID for 2 different elements is not valid.
If you're calling .combobox() on the two, simply use classes instead:
<select id="combobox1" class="combo"></select>
<select id="combobox2" class="combo"></select>
And then do $('.combo').combobox();.

jQuery Mobile Horizontal Select Box

I have been struggling with getting this to work properly. I am trying to get the Horizontally grouped select inputs to work, on my mobile site from this page:
http://jquerymobile.com/demos/1.0/docs/forms/selects/
Right now my select boxes look like this:
But when I view the example it looks like this:
My HTML looks like this:
<fieldset data-role="controlgroup" data-type="horizontal">
<select name="select-choice-month" id="select-choice-month">
<option>M</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select name="select-choice-day" id="select-choice-day">
<option>D</option>
<?php while($c < 32) {
echo '<option value="'.$c.'">'.$c.'</option>';
$c++;
} ?>
</select>
<select name="select-choice-year" id="select-choice-year">
<option>Y</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
</select>
</fieldset>
And my include scripts look like this:
<link rel="stylesheet" href="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="//code.jquery.com/jquery-1.6.4.js"></script>
<script src="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
I've tried copying and pasting the example exactly, and I still get the vertical and not horizontal, what am I doing wrong here?

Ok. So playing around with it some more and I got the select options working as you want it. These were the changes I had:
<meta name="viewport" content="width=device-width, initial-scale=0.9">
Keep in mind that the initial-scale value will change as per the width of your page and design.
Then I changed the select options as follows:
<div data-role="fieldcontain">
<div data-role="controlgroup" data-type="horizontal">
<select name="select-choice-month" id="select-choice-month" data-mini="true">
<option>Month</option>
<option value="jan">January</option>
<!-- etc. -->
</select>
<select name="select-choice-day" id="select-choice-day" data-mini="true">
<option>Day</option>
<option value="1">1</option>
<!-- etc. -->
</select>
<select name="select-choice-year" id="select-choice-year" data-mini="true">
<option>Year</option>
<option value="2011">2011</option>
<!-- etc. -->
</select>
</div>
</div>
For some strange reason adding the legend tag inside the controlgroup wrapper breaks the design. Don't know if this is a bug or not. If you want a title for the dropdowns then you can do the following:
<div data-role="controlgroup" data-type="horizontal">
<div style="font-weight: bold;">Date of Birth</div>
These changes worked for me on my iPhone4, HTC One, and iPad (there is a whole lot more real estate on the iPad, so it was always going to work. But tested it there anyway).