How do I change the header of a jQueryMobile multiple select dialog? - javascript

The documentation says - When a select is large enough to where the menu will open in a new page, the placeholder text is displayed in the button when no items are selected, and the label text is displayed in the menu's header. This differs from smaller overlay menus where the placeholder text is displayed in both the button and the header, and from full-page single selects where the placeholder text is not used at all.
I see 2 options here. 1, fix my code to where my label actually hides (I can't figure this out). or 2. Make the multiple select box display the placeholder in the header instead of the label.
Thanks for your help.
Here is the code I'm using:
<div data-role="fieldcontain" class="ui-hide-label">
<label for="abc" class="ui-hidden-accessible">Select</label>
<select name="abc" id="abc" multiple="multiple" data-native-menu="false">
<Option data-placeholder="true">Select Multiple</option>
<Option>Option1</option>
</select>
</div>

Related

Is there a way to make a multi select dropdown look like a normal dropdown

I want to make my dropdown to support multi-select feature. But from display purpose, I want to modify it. It should be visible to end user as a normal dropwn.
<select type="text" className="form-control" name="filterOptions" id="filterOptions"
onChange={(e)=> {self.optionsChange(e, item)}} style={{marginTop:"0px"}} multiple>
<option key="select" value="allValues">All Values</option>
{self.renderFilterOptions(item)}
</select>
This is my code for dropdown. Is it possible with some css or little bit modification, that the static value "All Values", will appear at the top of the dropdown, clicking on which will show other options, with the ability of multi select.
Or if not possible, then is there a way to add checkbox to a normal dropdown. Checkbox should be added to all the options. This will also help me..
Please guide me. Thanks in advance...

Why is my html dropdown and button not clickable?

I have a select and button here but they are not clickable: http://wp12190683.server-he.ch/webcam/test/
The content is generated dynamically via jQuery in lightgallery. The code generated is
<div class="demand">
<select name="picture" class="form-field">
<option value="baenkli">Bänkli</option>
<option value="bort">Bort</option>
<option value="Toissa">Toissa</option>
<option value="cheminee">Cheminée</option>
</select>
Bild abrufen
</div>
Why is this? Are the elements behind some others or is it not possible to use such elements created dynamically?
The problem is that the .lg-inner element which contains the gallery images is full screen on overlaps this element.
You could set the z-index of the .demand element to 1060 so that it will show above the image. (but it will overlap the image when required)

Text Area linked with drop down

I have a drop down linked to a text area, so that when a choice is selected from the drop down the textarea automatically populates from the same model. A working version can be seen here: JSFiddle
What I'm trying to do is programatically change the drop down and have that change reflected in the text area. I can update the drop down by setting the value and while the dropdown appears correct the change is not cascaded to the text area. ng-change doesn't fire when the dropdown is set manually, and I cannot set the value of the text area since it's a relational product of the dropdown model.
Is what I'm trying to do possible?
<div ng-controller="Ctrl">
<div class="inputItem sectionArea">
<label>Sample List:</label>
<select class="allVars"
ng-change="selectAction()"
ng-model="allVarsDD"
ng-options="allVars.text_short for allVars in allVars"
>
<option value="">-- Select Option --</option>
</select>
<br/>
<textarea class="frequentInstructions inputLine" type="textarea" name="frequentInstructions"
ng-model="allVarsDD.text_long"
</textarea>
</div>
<div>
<script>
var app = angular.module('app', []);
function Ctrl($scope) {
$scope.allVars=[
{"fid":"1","environment":"0","text_short":"Short text 1","text_long":"text_long_1"},
{"fid":"1","environment":"0","text_short":"Short text 2","text_long":"text_long_2"},
{"fid":"1","environment":"0","text_short":"Short text 3","text_long":"text_long_3"}
];
}
</script>
I figured out the proper syntax for setting:
In this example to set it to item #1:
$scope.allVarsDD = $scope.allVars[1];
I updated the fiddle to reflect the correct usage.

Drop down box selection mutes/disables a text area?

I'm using Bootstrap 3 and HTML5 to create a web form. There's a section of the form where the user can select his "Method of delivery" via a drop-down box. The values are: Shop Pick-Up, FedEx, and Null. If the user selects FedEx, he shall then enter in his mailing address in the textarea titled "Shipping Address". However, since we do not need his mailing address if he selects "Shop Pick-Up" or "Null", is there a way to mute or grey-out the text box and only have it be writable if he selects "FedEx"?
Looking for ideas on how to approach this scenario.
My HTML:
<div class="col-xs-3">
<div class="form-group">
<label for="delivery">Method of delivery</label>
<select id="delivery" name="delivery" class="form-control input-lg" tabindex="17">
<option value="options" selected disabled>-Select-</option>
<option value="Shop Pick-Up">Shop Pick-Up</option>
<option value="FedEx">FedEx</option>
<option value="null">Null</option>
</select>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label for="shippingAddress">Shipping Address</label>
<textarea name="shippingAddress" class="form-control" rows="7" placeholder="" tabindex="18"></textarea>
</div>
You have a few options for dealing with non-required fields. The simplest option would be to add the attribute disabled to the textarea if they choose fedEx.
http://jsfiddle.net/dy4r3/
Your other option is to hide the non-required fields using $.fn.hide() and $.fn.show()
http://jsfiddle.net/ANKXA/
You can obviously expand on these solutions to make them a bit more elegant, but this should get you in the right direction.
You can use the change event and update the text box based on the selected value.
$('#delivery').on('change', function(e){
if($(this).val() == 'FedEx')
$('#shippingAddress').prop('disabled', false);
else
$('#shippingAddress').prop('disabled', true);
});
Give the shippingAddress element an id (it should have one for the label for)
Then you can set the disabled attribute when the select box changes
$('#delivery').change(function(){
$('#shippingAddress').prop('disabled', !($(this).val() == "FedEx"));
});
The disabled property of textarea can help you here.
Fiddle Demo
But showing and hiding would be better.
But there showing and hiding will make your form shake so apply some animation to avoid that or go with this approch but this approch also has some flaws as the user is nt directly clear when he will be allowed to enter the address.
I prefer going by show and hide as it is easy and informative.
Here is demo with show and hide

Display content based on Select Menu dropdown change

I'm currently using the following to display an input field when I change a dropdown menu selection:
<select id="delivery_country" name="d_country" onchange="
if (this.selectedIndex==14){
this.form['statesUSA'].style.visibility='visible'
}else {
this.form['statesUSA'].style.visibility='hidden'
};">
However, this only changes the input form element called "statesUSA".
If I want to show the div that this form element is inside, how do I do this?
For the record, my HTML reads:
<div id="usa">
<input type="text" id="statesUSA" />
</div>
Many thanks for any pointers.
use document.getElementById(id)
this:
<select id="delivery_country" name="d_country" onchange="if (this.selectedIndex==14){document.getElementById('usa').style.visibility='visible'}else {document.getElementById('usa').style.visibility='hidden'};">

Categories

Resources