Does anybody know how to create multi-select dropdown like this?:
<select name="city" id="mySelect">
<!-- <option value="select"> </option> -->
<option value="banglore">Banglore</option>
<option value="bhubaneswar">Bhubaneswar</option>
<option value="patna">Patna</option>
<option value="indore">Indore</option>
</select>
You have to create a div with your list and checkboxes. They can be made visible using the :focus-within in CSS. A multiselect droptown doesn't exists in native HTML as far as I know
<div with focus-within>
<ul>
<li><input type="checkbox" name="city" value="val1">Val1</li>
...
</li>
</div>
https://css-tricks.com/keeping-parent-visible-child-focus/
This should explain it.
Also you can remove the dot in the list using CSS
I want Tampermonkey to be able to get the value of a drop down, additionally the value I'm after is part of the URL as an option.
Example url:
https://JimsPizza.com/NYC3/#/afe/rainbow?partition=PPPickToRebin3
HTML:
<div class="pull-right">
<small translate="afe_components_selector_process_path" class="ng-scope">Process Path:</small>
<select class="form-control input-sm ng-pristine ng-valid" ng-model="selectedChutePartitionName" ng-options="partitionName for partitionName in chutePartitionNames" ng-disabled="shouldDisablePartitionSelector()" ng-change="updateSelection({selection: chutePartitionMetadata[selectedChutePartitionName]})" style="">
<option value="0" selected="selected" label="PPAFE1">PPAFE1</option>
<option value="1" label="PPPickToRebin2">PPPickToRebin2</option>
<option value="2" selected="selected" label="PPPickToRebin3">PPPickToRebin3</option>
<option value="3" label="PPPickToRebin4">PPPickToRebin4</option>
</select>
</div>
Note: I am new to using Tampermonkey and JS in general, any answer is greatly appreciated. I have tried searching for examples but was unable to find anything
I'm currently using selectize.js for my dropdown and I would like to add a button at the end of the option list like this
I tried adding a span into the select group but it doesn't show up in the dropdown. How should I change my code to allow a button at the end of the option like shown in the picture?
$('#client').selectize();
<div class="form-group">
<label>Client</label>
<select id="client" type="text">
<option value="0">Add New Client</option>
<option value="1">Client 1</option>
<option value="2">Client 2</option>
<option value="3">Client 3</option>
</select>
<span class="input-group-addon" id="clear_addon">Clear</span>
</div>
You can modify the plugin's html and append a button after the items list:
$('.selectize-dropdown').append('<button id="clear_addon">Clear</button>');
I am sorry for the long question in advance. However, I seriously appreciate anyone who is willing to help here...
I have a form where users select options and then click "Generate Text" and a note is generated for their situation. This one particular note that I'm working on is complex and has 7 different ways in which it could be written.
With that said. What I want to do is have the user select from a drop down list (yes, I know it's not the best choice, but I've been backed in a corner due to consistent user experience requirements). Based on the option that the user selects, I want a different selection of user inputs to show up inline (ideally) with the "base" note. Here is an idea of the base note:
<div class="note" id="504">
<p class="item" id="p504">
<input type="radio" checked>
This is the beginning of the note
<select id="partSelect">
<option value=""></option>
<option value="Option 1 ">Option 1</option>
<option value="Option 2 ">Option 2</option>
<option value="Option 3 ">Option 3</option>
<option value="Option 4 ">Option 4</option>
<option value="Option 5 ">Option 5</option>
<option value="Option 6 ">Option 6</option>
<option value="Option 7 ">Option 7</option>
</select></p>
Notice that there are several spaces in the value. That's because the way the JS is written, it'll pick up the value of the select in the text of the note (I'm removing some proprietary information).
Previously, I've used a switch() statement based on the value of the drop down and then big blocks of code that will hide and show sections. Example:
$("#part1").css("display","none");
$("#part2").css("display","inline");
$("#part3").css("display","none");
$("#part4").css("display","none");
$("#part5").css("display","none");
$("#part6").css("display","none");
$("#part7").css("display","none");
I would like to not do that anymore. However, my attempts at doing things like:
$(".part").css("display","none");
$("#part1").css("display","inline");
have not worked.
Ideally, I would like to find the contents of a div and apply those contents to the end of the base note so that the user just experiences clicking through a dropdown box and the end of that note changes dependent on the option selected.
Does anyone have the ability to teach me something that I can do??
Use the value of each option to store the id of the element you want to show. Then, you can use $('#' + this.value) inside your change event handler to select the element to be shown. Also, lift your DOM query to $('.part') out of all event handlers so it is not run multiple times unnecessarily. You can use .show() and .hide() to control whether elements display, too, instead of .css().
Edit: You may not need .show() and .hide() if you switch the nodes with the variable content between an inline visible area and a hidden block area. See updated example below:
var parts = $('.part')
var content = $('#selected-content')
var templates = $('#hidden-area')
$('#partSelect').change(function () {
content.contents().appendTo(templates)
$('#' + this.value, templates).appendTo(content)
})
#hidden-area {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="note" id="504">
<p class="item" id="p504">
<input type="radio" checked/>
This is the beginning of the note
<select id="partSelect">
<option value=""></option>
<option value="part1">Option 1</option>
<option value="part2">Option 2</option>
<option value="part3">Option 3</option>
<option value="part4">Option 4</option>
<option value="part5">Option 5</option>
<option value="part6">Option 6</option>
<option value="part7">Option 7</option>
</select>
<span id="selected-content"></span>
</p>
<p id="hidden-area">
<span class="part" id="part1">Part 1</span>
<span class="part" id="part2">Part 2</span>
<span class="part" id="part3">Part 3</span>
<span class="part" id="part4">Part 4</span>
<span class="part" id="part5">Part 5</span>
<span class="part" id="part6">Part 6</span>
<span class="part" id="part7">Part 7</span>
</p>
</div>
I have page with two different selects, one shows times that a venue is open in the AM, the other shows times it is open in the PM. I am using an ng-hide and ng-show on the value of a different select to decide which select to show. It works ok, but for a split second it shows both selects on the page, is there anyway to avoid this?
My code:
<div class="col-xs-6">
<label class="control-label">Time</label>
<select class="form-control" ng-model="referral.reservationTime" ng-show="referral.reservationTimeAmOrPm === 'AM'">
<option selected="true" disabled="disabled">Select a Time</option>
<option ng-repeat="hour in amHours">{{hour | militaryToStandardTimeNoAmOrPm}}</option>
</select>
<select class="form-control" ng-model="referral.reservationTime" ng-hide="referral.reservationTimeAmOrPm === 'AM'">
<option selected="true" disabled="disabled">Select a Time</option>
<option ng-repeat="hour in pmHours">{{hour | militaryToStandardTimeNoAmOrPm}}</option>
</select>
</div>
</div>