How to set condition in dropdown list in HTML? - javascript

Here is my code for drop-down list part.
What should I add in to make the option selected when the value is matched with the option value? How to set condition like 'if value=50 ,selected = selected' ?
<label>Quantity:</label><br><br>
<select name="qty" id="qty" value="{{ qty }}">
<option value="50">50</option>
<option value="100">100</option>
<option value="150">150</option>
<option value="200">200</option>
<option value="250">250</option>
<option value="300">300</option>
<option value="350">350</option>
<option value="400">400</option>
<option value="450">450</option>
<option value="500">500</option>
</select>


following code make the option selected when the value is matched with the option value.
<label>Quantity:</label><br><br>
<select name="qty" id="qty">
<option value="50">50</option>
<option value="100">100</option>
<option value="150">150</option>
<option value="200">200</option>
<option value="250">250</option>
<option value="300">300</option>
<option value="350">350</option>
<option value="400">400</option>
<option value="450">450</option>
<option value="500">500</option>
</select>
<script>
$(document).ready(function(){
$('#qty option[value={{ $qty }}]').attr('selected','selected');
});
</script>

Related

Change HTML Select Tag when clicked from many identical elements

I'm trying to add some functiolality with jQuery to an HTML page but I'm having some troubles with accessing the DOM.
By now,I'm accessing to the DOM elements by 'id' that's because I think is the easiest way to do it but it has a problem. For a unique elemet it's ok but what if I have 2 or more equal elements? Id's supposed to be unique so I need a way diferent to do it.
I have some code which partially does what I need, but as I mentioned before, it only works with "one element", I need to do the same but with 2 or more "equal elements". So let me show you my code so far.
<div style="background-color: indigo;">Input
<select class="" name="" id="ana_dig">
<option value="" selected disabled>Choose</option>
<option value="ana">Analogic</option>
<option value="dig">Digital</option>
</select>
<select class="input" id="dig" style="display:none;">
<option value="" selected disabled>Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
<select class="input" style="display:none;" id="ana">
<option value="" selected disabled>Choose</option>
<option value="0">A0</option>
<option value="1">A1</option>
<option value="2">A2</option>
<option value="3">A3</option>
<option value="4">A4</option>
<option value="5">A5</option>
</select>
</div>
$(function() {
$('#ana_dig').change(function() {
$('.input').hide();
$('#' + $(this).val()).show();
});
});
As you can see, I have a 'div' which has 3 'select' and depending on what option is selected in the first 'select' it shows you the second or de third 'select'. Pretty easy but if copy and paste de 'div' the second 'div' does not work as the first. What sould I do if I want to 2, 3 or more 'div' work like the first one? Any suggestions?

Use classes instead.
NOTICE CHANGES NO MORE IDS, CLASS ADDED TO INPUTS YOU CAN HAVE MULTIPLE CLASSES SEPERATED BY SPACE
<div style="background-color: indigo;">Input
<select class="someclass" name="">
<option value="" selected disabled>Choose</option>
<option value="ana">Analogic</option>
<option value="dig">Digital</option>
</select>
<select class="input dig" style="display:none;">
<option value="" selected disabled>Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
<select class="input ana" style="display:none;">
<option value="" selected disabled>Choose</option>
<option value="0">A0</option>
<option value="1">A1</option>
<option value="2">A2</option>
<option value="3">A3</option>
<option value="4">A4</option>
<option value="5">A5</option>
</select>
</div>
And then do this instead: SEE THE CHANGE HERE ALSO
$(function() {
$('.someclass').change(function() {
$('.input').hide();
$('.' + $(this).val()).show(); // dot is looking for class # is looking for id
});
});

I've used data attributes as an additional selector.
First we find the parent element enclosing our group of select elements. We then use jQuery toggle() function to hide and show. We can then hide and show using the data attributes.
NOTE the id's are unique in the duplicated div which is fine. The jQuery below has no dependence on IDs
$("[data-input=type]").on("change", function(){
//Find the parent that encloses our selects
var $parent = $(this).closest(".inputGroup");
var selValue = $(this).val();
//Show and hide using toggle()
//$($parent).find("[data-input=ana]").toggle(selValue === "ana");
//$($parent).find("[data-input=dig]").toggle(selValue === "dig");
//Don't hide the "type" element - hide the other selects
$($parent).find("[data-input]").not(this).hide();
//Show the one with the matching data attribute
$($parent).find("[data-input= " + selValue + "]").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="background-color: indigo;" class="inputGroup">Input
<select class="" name="" id="ana_dig" data-input="type">
<option value="" selected disabled>Choose</option>
<option value="ana">Analogic</option>
<option value="dig">Digital</option>
</select>
<select class="input" id="dig" style="display:none;" data-input="dig">
<option value="" selected disabled>Choose Digital</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
<select class="input" style="display:none;" id="ana" data-input="ana">
<option value="" selected disabled>Choose Analog</option>
<option value="0">A0</option>
<option value="1">A1</option>
<option value="2">A2</option>
<option value="3">A3</option>
<option value="4">A4</option>
<option value="5">A5</option>
</select>
</div>
<div style="background-color: blue;" class="inputGroup">Input
<select class="" name="" id="ana_dig2" data-input="type">
<option value="" selected disabled>Choose</option>
<option value="ana">Analogic</option>
<option value="dig">Digital</option>
</select>
<select class="input" id="dig2" style="display:none;" data-input="dig">
<option value="" selected disabled>Choose Digital</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
<select class="input" style="display:none;" id="ana2" data-input="ana">
<option value="" selected disabled>Choose Analog</option>
<option value="0">A0</option>
<option value="1">A1</option>
<option value="2">A2</option>
<option value="3">A3</option>
<option value="4">A4</option>
<option value="5">A5</option>
</select>
</div>
With just a little bit of effort we can extend this into dynamically added content. We just need to add one more containing element around the form.
//Event handler is now attatched to [data-input=type] inside
//formGroup, including any that are dynamically added
$("#formGroup").on("change", "[data-input=type]", function() {
//Find the parent that encloses our selects
var $parent = $(this).closest(".inputGroup");
var selValue = $(this).val();
//Show and hide using toggle()
//$($parent).find("[data-input=ana]").toggle(selValue === "ana");
//$($parent).find("[data-input=dig]").toggle(selValue === "dig");
//Don't hide the "type" element - hide the other selects
$($parent).find("[data-input]").not(this).hide();
//Show the one with the matching data attribute
$($parent).find("[data-input= " + selValue + "]").show();
});
//Code to add new row
$("#addRow").on("click", function(){
//Clone first row
var rowClone = $(".inputGroup").eq(0).clone(true);
var rowCount = $(".inputGroup").length;
//Change the ids of the nested select elements
rowClone.find("select").each(function(){
$(this).attr("id", $(this).attr("id") + rowCount);
});
//Append the row
$("#formGroup").append(rowClone);
});
.inputGroup:nth-child(even) {
background-color:#CCC;
}
.inputGroup {
padding:5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="formGroup">
<div class="inputGroup">Input
<select class="" name="" id="ana_dig" data-input="type">
<option value="" selected disabled>Choose</option>
<option value="ana">Analogic</option>
<option value="dig">Digital</option>
</select>
<select class="input" id="dig" style="display:none;" data-input="dig">
<option value="" selected disabled>Choose Digital</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
<select class="input" style="display:none;" id="ana" data-input="ana">
<option value="" selected disabled>Choose Analog</option>
<option value="0">A0</option>
<option value="1">A1</option>
<option value="2">A2</option>
<option value="3">A3</option>
<option value="4">A4</option>
<option value="5">A5</option>
</select>
</div>
<div class="inputGroup">Input
<select class="" name="" id="ana_dig2" data-input="type">
<option value="" selected disabled>Choose</option>
<option value="ana">Analogic</option>
<option value="dig">Digital</option>
</select>
<select class="input" id="dig2" style="display:none;" data-input="dig">
<option value="" selected disabled>Choose Digital</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
<select class="input" style="display:none;" id="ana2" data-input="ana">
<option value="" selected disabled>Choose Analog</option>
<option value="0">A0</option>
<option value="1">A1</option>
<option value="2">A2</option>
<option value="3">A3</option>
<option value="4">A4</option>
<option value="5">A5</option>
</select>
</div>
</div>
<input type="button" value="Add Another Row" id="addRow"/>

Ok, this hides both the digital, and analog submenus, until it is selected by the first selection:
<script>
$(document).ready(function(){
$("select").hide();
$("#ana_dig").show();
$("#ana_dig").click(function(){
var x="#" + $(this).val();
$("select").hide();
$("#ana_dig").show();
$(x).show();
});
});
</script>
the op said if they wanted to add more in the first pull down selection, you would just add your additional option element with the value equal to the id to show. I added a reset function so when the first selection is changed, it resets... expanding it only is in the html code too.... I like to use ID for forms, and classes just for styling, and tag names for styling on page events

How to make an if statement to disable select option?

I have three select menus where the user selects a subject, year and season. However, I want it so that if the user selects the year '2019', the 'Fall' option will get disabled.
<select name="Subject">
<option value="Math">Math</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="Biology">Biology</option>
</select>
<select name="Year">
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
<select name="Season">
<option value="Spring">Spring</option>
<option value="Fall">Fall</option>
</select>

Create and event handler for the Year's change event and disable the season based on what Year's new value is.
https://jsfiddle.net/075fnm4a/
HTML
<select name="Subject">
<option value="Math">Math</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="Biology">Biology</option>
</select>
<select name="Year">
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
<select name="Season">
<option value="Spring">Spring</option>
<option value="Fall">Fall</option>
</select>
Jquery
$(document).ready(function(){
$('select[name="Year"]').on('change',function(){
var $this = $(this);
$('select[name="Season"]').find('option[value="Fall"]').prop('disabled', ($this.val() == '2019') ); // disabled or enabled
});
$('select[name="Year"]').trigger('change');
});

Like this.
document.querySelector('#year').onchange = ev => {
const value = ev.target.value;
if (value === '2019') {
document.querySelector('#fall').disabled = true;
} else {
document.querySelector('#fall').disabled = false;
}
}
<select name="Subject">
<option value="Math">Math</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="Biology">Biology</option>
</select>
<select name="Year" id="year">
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
<select name="Season">
<option value="Spring">Spring</option>
<option value="Fall" id="fall" disabled>Fall</option>
</select>

<select name="Subject">
<option value="Math">Math</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="Biology">Biology</option>
</select>
<select name="Year" id="years">
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
<select name="Season" id="seasons">
<option value="Spring">Spring</option>
<option value="Fall">Fall</option>
</select>
$('#years').on('change', function(){
if($(this).val()==='2019'){
$("#seasons option").each(function()
{
if($(this).val() === 'Fall'){
$(this).attr('disabled', 'disabled');
}
});
}
});

You can onchange event and bind callback to it that get season select element and enable and disable Fall season according to selection value
<select name="Subject">
<option value="Math">Math</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="Biology">Biology</option>
</select>
<select name="Year" onchange="changeYear(this.value)">
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
<select name="Season">
<option value="Spring" >Spring</option>
<option value="Fall" disabled>Fall</option>
</select>
<script>
function changeYear(value)
{
var seasons = document.getElementsByName("Season")[0].options;
var fallSeason = Array.apply(null, seasons).find(season => season.value === 'Fall');
fallSeason.disabled = (value==='2019')
}
</script>

How do you add/remove people dynamically from a list in html?

This question has been asked on this forum multiple times. Yet every time I've applied the code and edited the fields to accommodate my code it doesn't seem to work. Essentially I'm trying to develop a list from a form, so once the fields are filled out and you click the add button. The info provided would populate in an ordered list below the form. Here is the following html and javascript code I've got so far. When I click the add button the information that was typed gets showed in the url bar after the original domain name, but it never makes a list.
var list = document.getElementById('list');
function add(){
var name = document.getElementById('name').value;
var people = document.getElementById('people').value;
var phone = document.getElementById('phone').value;
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(name + people + phone));
list.appendChild(entry);
return false;
}
<html>
<head>
<meta charset="UTF-8">
<title>Whiskey on Water</title>
<h1>Whiskey on Water: Waiting List</h1>
</head>
<body>
<form id="lineInfo" onsubmit="return add()">
<fieldset>
<legend>Customer Information</legend>
<label for="name">Name*</label>
<input name="name" id="name" type="text" />
<label for="people">How many people?</label>
<input name="people" id="people" type="number" list="people1" />
<datalist id="people1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
<option value="60">60</option>
<option value="61">61</option>
<option value="62">62</option>
<option value="63">63</option>
<option value="64">64</option>
<option value="65">65</option>
<option value="66">66</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
<option value="71">71</option>
<option value="72">72</option>
<option value="73">73</option>
<option value="74">74</option>
<option value="75">75</option>
<option value="76">76</option>
<option value="77">77</option>
<option value="78">78</option>
<option value="79">79</option>
<option value="80">80</option>
<option value="81">81</option>
<option value="82">82</option>
<option value="83">83</option>
<option value="84">84</option>
<option value="85">85</option>
<option value="86">86</option>
<option value="87">87</option>
<option value="88">88</option>
<option value="89">89</option>
<option value="90">90</option>
<option value="91">91</option>
<option value="92">92</option>
<option value="93">93</option>
<option value="94">94</option>
<option value="95">95</option>
<option value="96">96</option>
<option value="97">97</option>
<option value="98">98</option>
<option value="99">99</option>
<option value="100">100</option>
</datalist>
<label for="phone">Phone Number*</label>
<input name="phone" id="phone" type="tel"/>
<script src="wow.js"></script>
<button onclick='add ()' type="submit"> Add to List </button>
</fieldset>
</form>
<ol id="list"></ol>
</body>
</html>

Well, your code works when run as a SO Snippet (see below), so we will need more info about the problem you're having before we can answer your question.
That said, I did notice that your new list item was adding twice, and this is because you are running the add() function twice: Once for the onclick handler on the button press, and once as the action of the form upon submit. So, we need to remove one of those... I bet that you'll end up wanting to keep the form, but my working code below removes the form (keeping the onclick on the button) because I bet that your problem is that, although your code works, you are refreshing your page with the form, clearing out the options that have been added to your list. If this sounds right to you then look into passing/fetching the new list items via GET params.
var list = document.getElementById('list');
function add(){
var name = document.getElementById('name').value;
var people = document.getElementById('people').value;
var phone = document.getElementById('phone').value;
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(name + people + phone));
list.appendChild(entry);
return false;
}
<html>
<head>
<meta charset="UTF-8">
<title>Whiskey on Water</title>
<h1>Whiskey on Water: Waiting List</h1>
</head>
<body>
<fieldset>
<legend>Customer Information</legend>
<label for="name">Name*</label>
<input name="name" id="name" type="text" />
<label for="people">How many people?</label>
<input name="people" id="people" type="number" list="people1" />
<datalist id="people1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
<option value="60">60</option>
<option value="61">61</option>
<option value="62">62</option>
<option value="63">63</option>
<option value="64">64</option>
<option value="65">65</option>
<option value="66">66</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
<option value="71">71</option>
<option value="72">72</option>
<option value="73">73</option>
<option value="74">74</option>
<option value="75">75</option>
<option value="76">76</option>
<option value="77">77</option>
<option value="78">78</option>
<option value="79">79</option>
<option value="80">80</option>
<option value="81">81</option>
<option value="82">82</option>
<option value="83">83</option>
<option value="84">84</option>
<option value="85">85</option>
<option value="86">86</option>
<option value="87">87</option>
<option value="88">88</option>
<option value="89">89</option>
<option value="90">90</option>
<option value="91">91</option>
<option value="92">92</option>
<option value="93">93</option>
<option value="94">94</option>
<option value="95">95</option>
<option value="96">96</option>
<option value="97">97</option>
<option value="98">98</option>
<option value="99">99</option>
<option value="100">100</option>
</datalist>
<label for="phone">Phone Number*</label>
<input name="phone" id="phone" type="tel"/>
<script src="wow.js"></script>
<button onclick='add ()' type="submit"> Add to List </button>
</fieldset>
<ol id="list"></ol>
</body>
</html>

This may help assuming each field has an id:
document.querySelector('#yourButton').addEventListener('click', function(e){
/* Stop the form from submiting if useful */
e.preventDefault();
/* get the values of fields one at a time */
var field1 = document.querySelector('#input1').value;
var field2 = document.querySelector('#input2').value;
...
/** prepare new node and insert */
var newNode = '<ul>'+'<li>'+field1+'</li>'+'<li>'+field2+'</li>'+'</ul>';
document.querySelector('body').appendChild(newNode);
});

HTML Options and Values Intechanging

I am currently trying to make a simple web application which logs to the console the values that are selected in an HTML drop-down menu. However, whenever I change my options in a different select, it ends up showing a value in the #player select. For example, if I chose Shot on Cage and clicked save, the console would show that the value to be b. If I am not explaining this thoroughly enough, please let me know, and I will try to re-explain my difficulties.
function myFunction() {
var a = document.getElementById("player").selectedIndex;
console.log(document.getElementsByTagName("option")[a].value);
var b = document.getElementById("what").selectedIndex;
console.log(document.getElementsByTagName("option")[b].value);
var c = document.getElementById("where").selectedIndex;
console.log(document.getElementsByTagName("option")[c].value);
var d = document.getElementById("when").selectedIndex;
console.log(document.getElementsByTagName("option")[d].value);
}
<select id="player">
<option value="b">B</option>
<option value="n">N</option>
<option value="a">A</option>
<option value="c">C</option>
<option value="m">M</option>
<option value="j">J</option>
<option value="ja">Ja</option>
</select>
<select id="what">
<option value="shoton">Shot on Cage</option>
<option value="shotoff">Shot off Cage</option>
<option value="goal">Goal</option>
<option value="assist">Assist</option>
<option value="block">Block</option>
<option value="steal">Steal</option>
<option value="turnover">Turnover</option>
<option value="drawn">Ejection Drawn</option>
<option value="ejected">Ejected</option>
</select>
<select id="where">
<option value="set">Set</option>
<option value="navy">Navy</option>
<option value="leftwing">1/2 side past 5</option>
<option value="rightwing">4/5 side past 5</option>
<option value="point">Point/3</option>
<option value="lefttwo">1/2 side 2 meter</option>
<option value="righttwo">4/5 side 2 meter</option>
<option value="1">6 on 5 1</option>
<option value="2">6 on 5 2</option>
<option value="3">6 on 5 3</option>
<option value="4">6 on 5 4</option>
<option value="5">6 on 5 5</option>
<option value="6">6 on 5 6</option>
</select>
<select id="when">
<option value="q1">Quarter 1</option>
<option value="q2">Quarter 2</option>
<option value="q3">Quarter 3</option>
<option value="q4">Quarter 4</option>
</select>
<button type="button" onclick="myFunction()"> Save </button>

This will work for you.
.getElementsByTagName("option") will ruin your result as it will select all the <option> tags and it post the result as one.
So try this code it will work.
function myFunction() {
var a = document.getElementById("player");
console.log(a.options[a.selectedIndex].value);
var b = document.getElementById("what");
console.log(b.options[b.selectedIndex].value);
var c = document.getElementById("where");
console.log(c.options[c.selectedIndex].value);
var d = document.getElementById("when");
console.log(d.options[d.selectedIndex].value);
}
<select id="player">
<option value="b">B</option>
<option value="n">N</option>
<option value="a">A</option>
<option value="c">C</option>
<option value="m">M</option>
<option value="j">J</option>
<option value="ja">Ja</option>
</select>
<select id="what">
<option value="shoton">Shot on Cage</option>
<option value="shotoff">Shot off Cage</option>
<option value="goal">Goal</option>
<option value="assist">Assist</option>
<option value="block">Block</option>
<option value="steal">Steal</option>
<option value="turnover">Turnover</option>
<option value="drawn">Ejection Drawn</option>
<option value="ejected">Ejected</option>
</select>
<select id="where">
<option value="set">Set</option>
<option value="navy">Navy</option>
<option value="leftwing">1/2 side past 5</option>
<option value="rightwing">4/5 side past 5</option>
<option value="point">Point/3</option>
<option value="lefttwo">1/2 side 2 meter</option>
<option value="righttwo">4/5 side 2 meter</option>
<option value="1">6 on 5 1</option>
<option value="2">6 on 5 2</option>
<option value="3">6 on 5 3</option>
<option value="4">6 on 5 4</option>
<option value="5">6 on 5 5</option>
<option value="6">6 on 5 6</option>
</select>
<select id="when">
<option value="q1">Quarter 1</option>
<option value="q2">Quarter 2</option>
<option value="q3">Quarter 3</option>
<option value="q4">Quarter 4</option>
</select>
<button type="button" onclick="myFunction()"> Save </button>
options[a.selectedIndex].value this simple will get you the value of the selected option value in the select and in javascript option in a property of select which we can combain with selectedIndex property and get you value.
Hope this was helpfull.

you have many options split into 4 selects ... document.getElementsByTagName will receive them ALL ... so using the selectedIndex is only valid for the fist select
you can use getElementsByTagName on any element - so, in this case you would use it on the select element
function myFunction() {
var a = document.getElementById("player");
console.log(a.getElementsByTagName("option")[a.selectedIndex].value);
var b = document.getElementById("what");
console.log(b.getElementsByTagName("option")[b.selectedIndex].value);
var c = document.getElementById("where");
console.log(c.getElementsByTagName("option")[c.selectedIndex].value);
var d = document.getElementById("when");
console.log(d.getElementsByTagName("option")[d.selectedIndex].value);
}
<select id="player">
<option value="b">B</option>
<option value="n">N</option>
<option value="a">A</option>
<option value="c">C</option>
<option value="m">M</option>
<option value="j">J</option>
<option value="ja">Ja</option>
</select>
<select id="what">
<option value="shoton">Shot on Cage</option>
<option value="shotoff">Shot off Cage</option>
<option value="goal">Goal</option>
<option value="assist">Assist</option>
<option value="block">Block</option>
<option value="steal">Steal</option>
<option value="turnover">Turnover</option>
<option value="drawn">Ejection Drawn</option>
<option value="ejected">Ejected</option>
</select>
<select id="where">
<option value="set">Set</option>
<option value="navy">Navy</option>
<option value="leftwing">1/2 side past 5</option>
<option value="rightwing">4/5 side past 5</option>
<option value="point">Point/3</option>
<option value="lefttwo">1/2 side 2 meter</option>
<option value="righttwo">4/5 side 2 meter</option>
<option value="1">6 on 5 1</option>
<option value="2">6 on 5 2</option>
<option value="3">6 on 5 3</option>
<option value="4">6 on 5 4</option>
<option value="5">6 on 5 5</option>
<option value="6">6 on 5 6</option>
</select>
<select id="when">
<option value="q1">Quarter 1</option>
<option value="q2">Quarter 2</option>
<option value="q3">Quarter 3</option>
<option value="q4">Quarter 4</option>
</select>
<button type="button" onclick="myFunction()"> Save </button>
That being said, this still isn't the best solution - use #weBBer's code INSTEAD
because a <select> element has a property called options, which you can use the selectedIndex property to get the selected <option> - see the better answer for an example

How to delete the selected option using title attribute of select tag

I want to delete the first option of the selected and I have selected tag id and class but the problem is selected class and id is changing when I open the form of different-2 event.and class "r" of selected tag is using more than one time different-3 drop down of form.
I want to remove the selected option using title attribute of selected tag.
If any other way to resolved this type of problem please share.
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="State*">
<option value="">Select One </option>
<option value="Michigan"> Michigan</option>
<option value="Alabama"> Alabama</option>
<option value="Alaska"> Alaska</option>
<option value="Arizona"> Arizona</option>
<option value="Arkansas"> Arkansas</option>
<option value="California"> California</option>
<option value="Colorado"> Colorado</option>
<option value="Connecticut"> Connecticut</option>
<option value="Delaware"> Delaware</option>
<option value="Florida"> Florida</option>
<option value="Georgia"> Georgia</option>
</select>
I want to delete
<option value="">Select One </option>

Here is how to select using class and title in plain JavaScript
window.onload=function() {
var sel = document.querySelector("select.r[title='State*']");
console.log(sel);
sel.options[0]=null;
}
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="State*">
<option>Please select State</option>
<option>option 1</option>
</select>
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="NotState*">
<option>Please select Not State</option>
<option>option 1</option>
</select>
Ditto in jQuery
$(function() {
var $options = $("select.r[title='State*'] option");
$options.eq(0).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="State*">
<option>Please select State</option>
<option>option 1</option>
</select>
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="NotState*">
<option>Please select Not State</option>
<option>option 1</option>
</select>

you can add the hidden attribute:
<option value="" hidden>Select One</option>
this will result in being the default selected value but you can't select it in the dropdown
Example:
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="State*">
<option value="" hidden>Select One</option>
<option value="Michigan">Michigan</option>
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
</select>
The hidden attribute can also be used to keep a user from seeing an element until some other condition has been met (like selecting a checkbox, etc.).
The hidden attribute is new in HTML5.
Source: http://www.w3schools.com/tags/att_global_hidden.asp

In your scenario if select box's id is changing dynamically then you can achieve this with it's class name like below
$(".r option[value='']").each(function() {
$(this).remove();
});
If you want to delete it by using ID then you can do it like this..
$("#DROPDOWN_735 option[value='']").each(function() {
$(this).remove();
});
Or
$("select option[value='']").each(function() {
$(this).remove();
});

Try this
$(document).ready(function() {
$("select[title='State*'] option:first-child[value='']").remove();
})
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="State*">
<option value="">Select One </option>
<option value="Michigan"> Michigan</option>
<option value="Alabama"> Alabama</option>
<option value="Alaska"> Alaska</option>
<option value="Arizona"> Arizona</option>
<option value="Arkansas"> Arkansas</option>
<option value="California"> California</option>
<option value="Colorado"> Colorado</option>
<option value="Connecticut"> Connecticut</option>
<option value="Delaware"> Delaware</option>
<option value="Florida"> Florida</option>
<option value="Georgia"> Georgia</option>
</select>
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="State*">
<option value="">Select One </option>
<option value="Michigan"> Michigan</option>
<option value="Alabama"> Alabama</option>
<option value="Alaska"> Alaska</option>
<option value="Arizona"> Arizona</option>
<option value="Arkansas"> Arkansas</option>
<option value="California"> California</option>
<option value="Colorado"> Colorado</option>
<option value="Connecticut"> Connecticut</option>
<option value="Delaware"> Delaware</option>
<option value="Florida"> Florida</option>
<option value="Georgia"> Georgia</option>
</select>
Hope it will be useful.

Categories

Resources