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 !!
Related
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>
I currently have a drop down menu displaying 3 options. Once the user selects an option, another drop down menu will display itself based on the choice from the first menu.
The first dropdown(InDiameter):
<label for="innerdiameter"><i class="fa fa-asterisk text-danger"></i>1. Inner Diameter:(*)
<select id="InDiameter" name="InDiameter">
<option value="N/A">Select</option>
<option value="Standard(1.0-5.0mm)">Standard(1.0-5.0mm)</option>
<option value="Microcuff(0.3-0.75mm)">Microcuff(0.3-0.75mm)</option>
<option value="Nanocuffs(56-250μm)">Nanocuffs(56-250μm)</option>
</select>
</label>
Second dropdown(Standard):
<label for="standard"> <br>1a. Inner Diameter for Standard:
<select id="Standard" name="Standard">
<option value="N/A">Select</option>
<option value="1mm">1mm</option>
<option value="1.5mm">1.5mm</option>
<option value="2mm">2mm</option>
<option value="2.5mm">2.5mm</option>
<option value="3mm">3mm</option>
<option value="3.5mm">3.5mm</option>
<option value="4mm">4mm</option>
<option value="5mm">5mm</option>
</select>
</label>
I've tried several js solutions, but none of them have worked. Any help would be appreciated.
in this case you need some one code of javascript and jquery:
the html code:
<label >Select:</label>
<select id="InDiameter" name="InDiameter" required onchange="miFuncion($(this).val());">
<option value="N/A">Select</option>
<option value="Standard">Standard(1.0-5.0mm)</option>
<option value="Microcuff">Microcuff(0.3-0.75mm)</option>
<option value="Nanocuffs">Nanocuffs(56-250μm)</option>
</select>
<div id="selectStandar" style="display:none;">
<label>Standard:</label>
<select id="Standard" name="Standard">
<option>Select</option>
<option value="1mm">1mm</option>
<option value="1.5mm">1.5mm</option>
<option value="2mm">2mm</option>
<option value="2.5mm">2.5mm</option>
<option value="3mm">3mm</option>
<option value="3.5mm">3.5mm</option>
<option value="4mm">4mm</option>
<option value="5mm">5mm</option>
</select>
</div>
<div id="selectMicrocuff" style="display:none;">
<label>Microcuff:</label>
<select id="Microcuff" name="Microcuff">
<option value="1">Microcuff 1</option>
<option value="2">Microcuff 2</option>
</select>
</div>
code jquery and Javascript
function miFuncion(value_selected){
if (value_selected=='Standard'){
$("#selectStandar").show();
$("#selectMicrocuff").hide();
}
if (value_selected=='Microcuff'){
$("#selectMicrocuff").show();
$("#selectStandar").hide();
}
}//end function
in this case i validate the first select(InDiameter), take the value and if is a Standard i show the div that have the select with the options Standard..and etc..
is only a method exist differentes methods..
Verify here
I want to link categories to their own pages. so I mean when I click to 'Hotels' it should open the page which is Category/Hotels
this is the current code
<select name="category">
<option value="">Any Category</option>
<option value="clubs">Clubs</option></a>
<option value="hotels">Hotels</option>
<option value="pubbar">Pub&Bar</option>
<option value="restaurants">Restaurants</option>
</select>
lets say I want to link like that
<option value="www.website.com/event_cat/clubs/> Clubs </option>
<option value="www.website.com/event_cat/hotels/> Hotels </option>
.. and so on
but when I do, its directing to this page:
www.website.com/events/?time=&category=%2Fevent_cat%2Fclubs%2F&location=
JSfiddle Demo
<html>
<body>
<form name="blah_blah">
<select name="ddmenu_name" id="ddmenu_name" style="width: 80% !important;">
<option value="" selected>Select Site</option>
<option value="http://www.yahoo.com">Yahoo!!!</option>
<option value="http://www.gmail.com">Gmail</option>
<option value="http://www.google.co.in">Google</option>
<option value="http://www.facebook.com">Facebook</option>
</select>
<input type="button" name="Submit" value="Go!" onClick="window.open(ddmenu_name.value,'newtab'+ddmenu_name.value)">
</form>
</body>
</html>
You just have to use full domain path with http or https(if its a secure server)
<option value="http://www.website.com/event_cat/clubs/> Clubs </option>
<option value="http://www.website.com/event_cat/hotels/> Hotels </option>
Since you have the first option already selected, in the first option, keep the value empty and add the onchange, as per the code below:
<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
<option value="">Any Category</option>
<option value="www.website.com/event_cat/clubs/">Clubs</option>
<option value="www.website.com/event_cat/hotels/">Hotels</option>
<option value="pubbar">Pub&Bar</option>
<option value="restaurants">Restaurants</option>
</select>
I am trying to use a multiple select2 select form in my html with bootstrap. But I'm having issue with sizing, the select2 box is not working with the grid, and it also gurbles the size of next item. The html
<div class="select2-container col-md-11">
<select class="form-control s2" id="complaint" multiple="multiple" name=
"complaint[]">
<option value="bad_breath">
Bad Breath
</option>
<option value="bleeding_gum">
Bleeding Gum
</option>
<option value="swollen_gum">
Swollen Gum
</option>
<option value="gum_pain">
Gum Pain
</option>
<option value="loose_teeth">
Loose Teeth
</option>
<option value="sensitive_teeth">
Sensitive Teeth
</option>
<option value="darkened_teeth">
Darkened Teeth
</option>
<option value="damaged_teeth">
Damaged Teeth
</option>
</select>
</div>
The JS
<script type="text/javascript">
$(".s2").select2({
closeOnSelect: false
});
$(document).ready(function() {});
Full code here http://www.codeply.com/go/Ly1UHW2HT2
First Add in your select box : <select data-width="100%"></select>
Add This JS and CSS in you header :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>
to fix the layout (widths not correct) you need to wrap the contents in a form-group:
<div class="form-group">
<label class="col-md-1 control-label" for="select">Label</label>
<div class="select2-container col-md-11">
<select id="select" class="form-control s2" multiple="multiple" name="name[]" data-width="100%">
<option value="o1">Option 1</option>
<option value="o2">Option 2</option>
</select>
</div>
</div>
Re the JS, I think there is an issue with codeply as copying the html and js and referencing the scripts and links directly in codepen works. See here for an example.
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).