I am trying to set a next and before button to act as an option switcher. When I click on the Next button twice I can no longer get the previous button to work and vice versa.
This is for switching the sources of my video according to the next and previous button clicking as well as selecting from the options list.
$(document).ready(function(){
$('video').attr('src',$("#test").val());
$("#test").change(function(){
$('video').attr('src',$(this).val());
});
});
$("#fieldPrev").click(function() {
$('#test option:selected').prev().attr('deselected','selected');
$('video').attr('src',$("#test").val());
$("#test").change(function(){
$('video').attr('src',$(this).val());
});
});
$('#fieldNext').click(function() {
$('#test option:selected').next().attr('selected','selected');
$('video').attr('src',$("#test").val());
$("#test").change(function(){
$('video').attr('src',$(this).val());
});
});
Expected that when I click the previous the previous option will display.
<div id="epBtn" style="display:none;">
<button id="fieldPrev">❮</button>
<button id="fieldNext">❯</button>
<select id="test">
<option value="">-- Select Episode --</option>
<option value="Season 1/ep1.mp4">EP 1</option>
<option value="Season 1/ep2.mp4">EP 2</option>
<option value="Season 1/ep3.mp4">EP 3</option>
<option value="Season 1/ep4.mp4">EP 4</option>
<option value="Season 1/ep5.mp4">EP 5</option>
<option value="Season 1/ep6.mp4">EP 6</option>
<option value="Season 1/ep7.mp4">EP 7</option>
<option value="Season 1/ep8.mp4">EP 8</option>
<option value="Season 1/ep9.mp4">EP 9</option>
<option value="Season 1/ep10.mp4">EP 10</option>
<option value="Season 1/ep11.mp4">EP 11</option>
<option value="Season 1/ep12.mp4">EP 12</option>
</select>
Related
I have the following selection box (multiple selection) in HTML.
<select class="selectpicker form-control" id="dhsSelect" multiple data-selected-text-format="count"
title="Selected All..." name="dhsSelect">
<optgroup data-max-options="1" id="top">
<option value="T5">Top 5</option>
<option value="T10">Top 10</option>
<option value="T20">Top 20</option>
</optgroup>
<optgroup id="filter">
<option value="1">< 10</option>
<option value="2">10 - 20</option>
<option value="3">≥ 20</option>
</optgroup>
</select>
And the following JS file
$("#dhsSelect").change(function() {
// if any item in the top optgroup (id='top') is being selected, do something
// if any item in the second optgroup (id='bottom') is bring selected, do something
});
I am trying to work on the if condition. Any help would be appreciated.
You mean something like this?
Change map to forEach and return to your function and remove the console log - I’m just giving you the tools, the lack of details in your question results in lack of details in my answer
$("#dhsSelect").on("change", function() {
console.log(
$("option", this).map(function() {
if (this.selected) return this.value + " " + this.closest("optgroup").id
}).get()
)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="selectpicker form-control" id="dhsSelect" multiple data-selected-text-format="count" title="Selected All..." name="dhsSelect">
<optgroup data-max-options="1" id="top">
<option value="T5">Top 5</option>
<option value="T10">Top 10</option>
<option value="T20">Top 20</option>
</optgroup>
<optgroup id="filter">
<option value="1">< 10</option>
<option value="2">10 - 20</option>
<option value="3">≥ 20</option>
</optgroup>
</select>
Here is an easy way:
$(function(){ // load
var dhsSelect = $('#dhsSelect');
dhsSelect.on('change', function(){
console.clear(); // remove upon deployment
dhsSelect.find(':selected').each(function(){
var p = $(this).parent();
// just showing we got the correct parent
console.log(p.attr('id'))
});
});
}); // end load
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="selectpicker form-control" id="dhsSelect" multiple data-selected-text-format="count"
title="Selected All..." name="dhsSelect">
<optgroup data-max-options="1" id="top">
<option value="T5">Top 5</option>
<option value="T10">Top 10</option>
<option value="T20">Top 20</option>
</optgroup>
<optgroup id="filter">
<option value="1">< 10</option>
<option value="2">10 - 20</option>
<option value="3">≥ 20</option>
</optgroup>
</select>
I'm using a select field on my site which reloads the page and then adds this to value to a separate div. I want to be able to disable this option if any of the divs have the same value as the option.
<select id="bayname" name="bayname">
<option value="">--Select Bay--</option>
<option value="1">Bay 1</option>
<option value="2">Bay 2</option>
<option value="3">Bay 3</option>
<option value="4">Bay 4</option>
<option value="5">Bay 5</option>
<option value="6">Bay 6</option>
<option value="7">Bay 7</option>
<option value="8">Bay 8</option>
<option value="9">Bay 9</option>
<option value="10">Bay 10</option>
<option value="11">Bay 11</option>
<option value="12">Bay 12</option>
<option value="13">Bay 13</option>
<option value="14">Bay 14</option>
<option value="15">Bay 15</option>
<option value="16">Bay 16</option>
<option value="17">Bay 17</option>
<option value="18">Bay 18</option>
<option value="19">Bay 19</option>
<option value="20">Bay 20</option>
<option value="21">Bay 21</option>
<option value="22">Bay 22</option>
<option value="23">Bay 23</option>
<option value="24">Bay 24</option>
<option value="25">Bay 25</option>
<option value="26">Bay 26</option>
<option value="27">Bay 27</option>
<option value="28">Bay 28</option>
<option value="29">Bay 29</option>
<option value="30">Bay 30</option>
</select>
For example if a user clicks on 'Bay 1' a div will be created like this:
<li id="1509013949" class="cart-select cart-mode-cart">
1
</li>
And then when the page reloads again, i want to create an if statement so if the value from the select is within one of the divs then it should add it as disabled.
I've had ago at doing this using the code below and i can't get it to print out in the console log.
var baynumberoption = $("#bayname option").val();
var baynumber = $(".cart-select a[href='#select']").text();
if (baynumber.indexOf(baynumberoption) >= 0) {
console.log("match found");
}
$("#bayname option") returns all of the options so I think you really want to use the following. Note if you don't want to rely on the inner text of the link, you can also add data attribute like data-id="1" to store the value which can be used like:
$("#bayname option").each(function() {
var val = $(this).val();
if ( $(".cart-select a[data-id=" + val + "]").length > 0 ) {
$(this).attr("disabled", "disabled");
}
});
Some of the syntax may be off but you get the idea.
Need to disable option "5" & "6" when the option value "2" is selected. It should display all the options in the List_2 when option "1" is selected. How can I do that using jQuery or any other method.
if ($('option[value=2]').prop('selected', true)) {
$('option[value=5]').prop('disabled', true);
}
<HTML>
<body>
<select id= "List_1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select id= "List_2">
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</body>
</HTML>
Here you go with a solution https://jsfiddle.net/eurbvzk1/
var disabledDic = {
"1" : ["6"],
"2" : ["4", "5"],
"3" : []
}
$('select#list_1').on('change', function(){
$('select#list_2 option').each(function(){
$(this).removeAttr('disabled');
});
var disableOption = disabledDic[$(this).val()];
$.each( disableOption, function(i){
$('option[value="' + disableOption[i] + '"]').prop('disabled', 'disabled');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="list_1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 2</option>
</select>
<select id= "list_2">
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
Create a dictionary that will contain each first select option as key & value will be list of disabled options from second list.
Onchange method check the dictionary & loop through the disabled value.
Hope this will help you.
With plain JS:
document.getElementById('List_1').onchange = function() {
document.getElementById('List_2')[1].disabled = (document.getElementById('List_1').selectedIndex == 1);
document.getElementById('List_2')[2].disabled = (document.getElementById('List_1').selectedIndex == 1);
}
<select id="List_1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select id="List_2">
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
Sorry about the confusing title, but basically my question is how do I use the selection from one dropdown menu to decide which dropdown menu shows up next? I want to do something like this:Select menuoption #1option #2option #3Selecting option #1 would open another select menu:sub-option #1.1sub-option #1.2sub-option #1.3and the same thing for options #2 and #3, and THEN sub-option #1.1 would open another select menu.I think I have the HTML down just fine, but I'm extremely rusty with Javascript.https://jsfiddle.net/mun52n13/Any ideas?In my code, screen replacement should trigger #devices which, when selecting iphone should trigger #iphones, selecting ipad should trigger #ipads, and etc.
HTML
<select name="service" id="service" class="service">
<option>Select a Service</option>
<option value="screen" id="screen">Screen Replacement</option>
<option value="comp" id="comp">Computer Work</option>
<option value="misc" id="misc">Miscellaneous</option>
</select>
<div id="devices">
<select name="devices" id="devices" class="devices">
<option value="iphone" id="iphone">iPhone</option>
<option value="ipad" id="ipad">iPad</option>
<option value="android" id="android">Android</option>
</select>
</div>
<div id="iphones">
<select name="iphone" id="iphone" class="iphone">
<!--<option value="iphone6s" id="iphone6s">iPhone 6S</option> -->
<!--<option value="iphone6splus" id="iphone6splus">iPhone 6S Plus</option>-->
<option value="iphone6" id="iphone6">iPhone 6</option>
<option value="iphone6plus" id="iphone6plus">iPhone 6 Plus</option>
<option value="iphone5s" id="iphone5s">iPhone 5S</option>
<option value="iphone5c" id="iphone5c">iPhone 5C</option>
<option value="iphone5" id="iphone5">iPhone 5</option>
<option value="iphone4s" id="iphone4s">iPhone 4S</option>
<option value="iphone4" id="iphone4">iPhone 4</option>
</select>
</div>
<div id="ipads">
<select name="ipad" id="ipad" class="ipad">
<option value="ipadmini3" id="ipadmini3">iPad Mini 3</option>
<option value="ipadmini2" id="ipadmini2">iPad Mini 2</option>
<option value="ipadair" id="ipadair">iPad Air</option>
<option value="ipad4" id="ipad4">iPad 4</option>
<option value="ipad3" id="ipad3">iPad 3</option>
<option value="ipadmini" id="ipadmini">iPad Mini</option>
<option value="ipad2" id="ipad2">iPad 2</option>
</select>
</div>
<div id="computerwork">
<select name="compwork" id="compwork" class="compwork">
<option value="desktopcreation" id="desktopcreation">Desktop Creation</option>
<option value="desktopbuild" id="desktopbuild">Desktop Build</option>
<option value="hardwareupgrades" id="hardwareupgrades">Hardware Upgrades</option>
<option value="datarecovery" id="datarecovery">Data Recovery/Transfer</option>
<option value="spywareremoval" id="spywareremoval">Spyware/Adware Removal</option>
<option value="virusremoval" id="virusremoval">Virus Removal</option>
</select>
</div>
<div id="miscservices">
<select name="miscellaneous" id="miscellaneous" class="miscellaneous">
<option value="networksecurity" id="networksecurity">Network Security</option>
<!--<option value="webdesign" id="webdesign">Website Design</option>-->
</select>
</div>
JS
$(document).ready(function(){
$('#service').on('change', function() {
$('#devices').hide();
$('#iphones').hide();
$('#ipads').hide();
$('#computerwork').hide();
$('#miscservices').hide();
if ( this.value == 'screen')
{
$("#devices").show();
}
if ( this.value == 'iphone')
{
$("#iphones").show();
}
if ( this.value == 'ipad')
{
$("#ipads").show();
}
if ( this.value == 'comp')
{
$("#computerwork").show();
}
if ( this.value == 'misc')
{
$("#miscservices").show();
}
if ( this.value == 'comp')
{
$("#computerwork").show();
}
if ( this.value == 'miscservices')
{
$("#miscservices").show();
}
});
});
That is a short prototype on how to make your thing work :
check the js fiddle:
https://jsfiddle.net/yehiaawad/mun52n13/6/
When you select devices from services select
=> services-devices would display
=> when selecting Iphone from devices select
=>devices-iphones should be displayed and the rest would be hidden
(the same thing with IPad)
HTML:
<select name="service" id="service" class="service">
<option>Select a Service</option>
<option value="screen" data-target="devices" id="screen">Screen Replacement</option>
<option value="comp" data-target="comp" id="comp">Computer Work</option>
<option value="misc" data-target="misc" id="misc">Miscellaneous</option>
</select>
<div style="display:none" id="service-devices">
<select name="devices" id="devices" class="devices">
<option>Select a device</option>
<option value="iphone" data-target="iphones" id="iphone">iPhone</option>
<option value="ipad" data-target="ipads" id="ipad">iPad</option>
<option value="android" id="android">Android</option>
</select>
<div style="display:none" id="devices-iphones">
<select name="iphone" id="iphone" class="iphone">
<!--<option value="iphone6s" id="iphone6s">iPhone 6S</option> -->
<!--<option value="iphone6splus" id="iphone6splus">iPhone 6S Plus</option>-->
<option></option>
<option value="iphone6" id="iphone6">iPhone 6</option>
<option value="iphone6plus" id="iphone6plus">iPhone 6 Plus</option>
<option value="iphone5s" id="iphone5s">iPhone 5S</option>
<option value="iphone5c" id="iphone5c">iPhone 5C</option>
<option value="iphone5" id="iphone5">iPhone 5</option>
<option value="iphone4s" id="iphone4s">iPhone 4S</option>
<option value="iphone4" id="iphone4">iPhone 4</option>
</select>
</div>
<div style="display:none" id="devices-ipads">
<select name="ipad" id="ipad" class="ipad">
<option></option>
<option value="ipadmini3" id="ipadmini3">iPad Mini 3</option>
<option value="ipadmini2" id="ipadmini2">iPad Mini 2</option>
<option value="ipadair" id="ipadair">iPad Air</option>
<option value="ipad4" id="ipad4">iPad 4</option>
<option value="ipad3" id="ipad3">iPad 3</option>
<option value="ipadmini" id="ipadmini">iPad Mini</option>
<option value="ipad2" id="ipad2">iPad 2</option>
</select>
</div>
</div>
<div style="display:none" id="service-comp">
<select name="compwork" id="compwork" class="compwork">
<option value="desktopcreation" id="desktopcreation">Desktop Creation</option>
<option value="desktopbuild" id="desktopbuild">Desktop Build</option>
<option value="hardwareupgrades" id="hardwareupgrades">Hardware Upgrades</option>
<option value="datarecovery" id="datarecovery">Data Recovery/Transfer</option>
<option value="spywareremoval" id="spywareremoval">Spyware/Adware Removal</option>
<option value="virusremoval" id="virusremoval">Virus Removal</option>
</select>
</div>
<div style="display:none" id="service-misc">
<select name="miscellaneous" id="miscellaneous" class="miscellaneous">
<option value="networksecurity" id="networksecurity">Network Security</option>
<!--<option value="webdesign" id="webdesign">Website Design</option>-->
</select>
</div>
Javascript:
$(document).ready(function(){
$('select').on('change', function() {
var target=$(this).find(":selected").attr("data-target");
var id=$(this).attr("id");
$("div[id^='"+id+"']").hide();
$("#"+id+"-"+target).show();
});
});
This is a way to do it: https://jsfiddle.net/mun52n13/7/
I created a menu class, a attribute data-parent to set the parent menu, and a attribute data-target to set the value associated with this menu.
So you can look for which menu should be shown or hidden.
CSS:
.menu {
display: block;
}
.menu.hidden {
display: none;
}
HTML:
<select name="service" id="service" class="service menu">
<option>Select a Service</option>
<option value="screen" id="screen">Screen Replacement</option>
<option value="comp" id="comp">Computer Work</option>
<option value="misc" id="misc">Miscellaneous</option>
</select>
<select name="devices" id="devices" class="devices menu hidden" data-parent="#service" data-target="screen">
<option></option>
<option value="iphone" id="iphone">iPhone</option>
<option value="ipad" id="ipad">iPad</option>
<option value="android" id="android">Android</option>
</select>
<select name="iphone" id="iphone" class="iphone menu hidden" data-parent="#devices" data-target="iphone">
<option></option>
<!--<option value="iphone6s" id="iphone6s">iPhone 6S</option> -->
<!--<option value="iphone6splus" id="iphone6splus">iPhone 6S Plus</option>-->
<option value="iphone6" id="iphone6">iPhone 6</option>
<option value="iphone6plus" id="iphone6plus">iPhone 6 Plus</option>
<option value="iphone5s" id="iphone5s">iPhone 5S</option>
<option value="iphone5c" id="iphone5c">iPhone 5C</option>
<option value="iphone5" id="iphone5">iPhone 5</option>
<option value="iphone4s" id="iphone4s">iPhone 4S</option>
<option value="iphone4" id="iphone4">iPhone 4</option>
</select>
<select name="ipad" id="ipad" class="ipad menu hidden" data-parent="#devices" data-target="ipad">
<option></option>
<option value="ipadmini3" id="ipadmini3">iPad Mini 3</option>
<option value="ipadmini2" id="ipadmini2">iPad Mini 2</option>
<option value="ipadair" id="ipadair">iPad Air</option>
<option value="ipad4" id="ipad4">iPad 4</option>
<option value="ipad3" id="ipad3">iPad 3</option>
<option value="ipadmini" id="ipadmini">iPad Mini</option>
<option value="ipad2" id="ipad2">iPad 2</option>
</select>
<select name="compwork" id="compwork" class="compwork menu hidden" data-parent="#service" data-target="comp">
<option></option>
<option value="desktopcreation" id="desktopcreation">Desktop Creation</option>
<option value="desktopbuild" id="desktopbuild">Desktop Build</option>
<option value="hardwareupgrades" id="hardwareupgrades">Hardware Upgrades</option>
<option value="datarecovery" id="datarecovery">Data Recovery/Transfer</option>
<option value="spywareremoval" id="spywareremoval">Spyware/Adware Removal</option>
<option value="virusremoval" id="virusremoval">Virus Removal</option>
</select>
<select name="miscellaneous" id="miscellaneous" class="miscellaneous menu hidden" data-parent="#service" data-target="misc">
<option></option>
<option value="networksecurity" id="networksecurity">Network Security</option>
<!--<option value="webdesign" id="webdesign">Website Design</option>-->
</select>
JAVASCRIPT:
$(document).ready(function() {
$('.menu').change(function() {
var id = this.id;
var value = this.value;
if ($(this).css('display') == 'none') {
$('.menu[data-parent="#' + id + '"]').css('display', 'none').change();
} else {
$('.menu[data-parent="#' + id + '"]:not([data-target="' + value + '"])').css('display', 'none').change();
$('.menu[data-parent="#' + id + '"][data-target="' + value + '"]').css('display', 'block').change();
}
});
});
This is my HTML
<select id="v-1" class="form-control input-sm">
<option value="624">Video 1</option>
<option value="625">Video 2</option>
<option value="626">Video 3</option>
<option value="627">Video 4</option>
<option value="628">Video 5</option>
<option value="629">Video 6</option>
<option value="630">Video 7</option>
</select>
In my javascript file, i have a function that removes some of the options by adding style="display: none;" to the option tag. For example:
<select id="v-1" class="form-control input-sm">
<option value="624" style="display: none;">Video 1</option>
<option value="625" style="display: none;">Video 2</option>
<option value="626">Video 3</option>
<option value="627" style="display: none;">Video 4</option>
<option value="628">Video 5</option>
<option value="629">Video 6</option>
<option value="630" style="display: none;">Video 7</option>
</select>
But when I call $('#v-1').val(), the result is 624. I wanted the result to be 626 or the first option that doesn't have the style, display: none.
$("#v-1 option").each(function()
{
if($(this).is(':visible')){
alert($(this).val());
return false;
}
});
Doesn't matter if using above code will help. Anyhow display : none won't hide the option items in Macintosh computer.
Instead I would suggest to remove the element from the select and include it on the fly when needed.
You could, probably, do:
jQuery("#v-1").find("option:visible:selected").val();
To get the value of the selected option (and visible).
If you just want to get the value of the first visible option, you could do:
jQuery("#v-1").find("option:visible:eq(0)").val();
Try this
$("#v-1 option").each(function()
{
if($(this).is(':visible')){
alert($(this).val());
return false;
}
});
Try this :
$('option:not(:checked)).val()
http://api.jquery.com/not-selector/
Use disable instead of style="display: none;" in your option
Html-
<select id="v-1" class="form-control input-sm">
<option value="624" disabled="disabled" >Video 1</option>
<option value="625" disabled="disabled">Video 2</option>
<option value="626">Video 3</option>
<option value="627" disabled="disabled">Video 4</option>
<option value="628">Video 5</option>
<option value="629">Video 6</option>
<option value="630" disabled="disabled">Video 7</option>
</select>
script-
$(document).ready(function(){
alert($("#v-1").val());
})
output: 626
Here's the fiddle http://jsfiddle.net/v52hb28u/