How to use data-attr to create an anchor in selectbox - javascript

When choosing an option from a selectbox, i want to create an anchor.
Below works fine:
<select class="form-select name" onchange="location = this.value;">
<option value="Naam" selected>Naam</option>
<option class="" value="index.php?name=John">John</option>
<option class="" value="index.php?name=Susan">Susan</option>
</select>
But i prefer to seperate the anchor from the value.
So i thought something like this should also work but unfortunately:
<select class="form-select name" onchange="location = this.attr.data-anchor;">
<option value="Naam" selected>Naam</option>
<option class="" data-anchor="index.php?name=John" value="John">John</option>
<option class="" data-anchor="index.php?name=Susan" value="Susan">Susan</option>
</select>
Is there a way i can use something like data-anchor and trigger on that value with select?

This should work:
<select class="form-select name" onchange="location = (this.selectedOptions[0].dataset.anchor);">
<option value="Naam" selected>Naam</option>
<option class="" data-anchor="index.php?name=John" value="John">John</option>
<option class="" data-anchor="index.php?name=Susan" value="Susan">Susan</option>
</select>

Related

Having the same height for datepicker and select?

I have this code using HTML, Javascript :
Here is the HTML code :
<input type="text" id="date1" name="date1"/>
<select name="pets" id="pet-select">
<option value="">--Please choose an option--</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="hamster">Hamster</option>
<option value="parrot">Parrot</option>
<option value="spider">Spider</option>
<option value="goldfish">Goldfish</option>
</select>
Here is my code : https://jsfiddle.net/6egzaj3q/
But I would like to have no margin between the select and the datepicker, and also to have the same height for the datepicker and the select I mean something like this :
What I want
Could you help me please ?
Wrap those input and select into new div and implement display: flex layout to that div selector and the whitespace will be removed.
<div style="display: flex">
<input type="text" id="date1" name="date1" />
<select name="pets" id="pet-select">
<option value="">--Please choose an option--</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="hamster">Hamster</option>
<option value="parrot">Parrot</option>
<option value="spider">Spider</option>
<option value="goldfish">Goldfish</option>
</select>
</div>
Here's the working snippet.

How to add links to the list of cities?

there are dependent lists. How to add page links to cities?
<select name="country" id="country">
<option value="bra">Браpилия</option>
<option value="rus">Россия</option>
<option value="ind">Индия</option>
<option value="chn">Китай</option>
<option value="zaf">ЮАР</option>
</select>
https://jsfiddle.net/4tfmv601/
<select name="country" id="country" onchange="location = this.value;">
<option value="bra.php">a</option>
<option value="rus.php">b</option>
<option value="ind.php">c</option>
<option value="chn.php">d</option>
<option value="zaf.php">e</option>
</select>
You should create an event listener that listens to the country select for input.
This can be done as follows:
in JS:
country.setEventListener('change', selectCountry);
OR
country.onchange = selectCountry();
OR in plain HTML
<select onchange="selectCountry()" name="city" id="city">

Auto select two options based on drop-down list

I have the following HTML code to select Salesman, State, and Office Number. What I want to be able to do is select the Salesman and have it auto select the State and Office Number for that person:
<label for="saleman">Senior Agent: </label>
<select id="salesman" name="salesman">
<option value="" selected="selected"></option>
<option value="Tammy Sizemore">Tammy Sizemore</option>
<option value="Ron Jeffries">Ron Jeffries</option>
<option value="Tony Clark">Tony Clark</option>
<option value="Mark Sengala">Mark Sengala</option>
<option value="Judy Donato">Judy Donato</option>
<option value="Mary Porter">Mary Porter</option>
</select>
<label for="state">State: </label>
<select id="state" name="state">
<option value="" selected="selected"></option>
<option value="Iowa">Iowa</option>
<option value="Kansas">Kansas</option>
<option value="Maine">Maine</option>
<option value="Ohio">Ohio</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="West Virginia">West Virginia</option>
</select>
<label for="number">Office Number: </label>
<select id="number" name="number">
<option value="" selected="selected"></option>
<option value="A219">A219</option>
<option value="A256">A256</option>
<option value="G019">G019</option>
<option value="G222">G222</option>
<option value="Q161">Q161</option>
<option value="Q341">Q341</option>
</select>
The problem I'm having is that it's a fairly complex decision process as to who belongs where. For example:
If I select 'Tammy Sizemore', I know she's in Kansas in office A256.
If I select 'Ron Jeffries', I know he's in Maine at office Q161.
I'm somewhat familiar with implementing jQuery or JavaScript. The page is being rendered by PHP. If it can be done in one of those, I'm fine. I just don't know how to implement this.
Is there an efficient way to do this?
Here's the work-around I came up with (in case someone else finds this handy):
When setting up the drop-down list, I combined the three elements (Name, State, and Office Number) into a single value but only showed the Salesman name.
<label for="saleman">Senior Agent: </label>
<select id="salesman" name="salesman">
<option value="" selected="selected"></option>
<option value="Tammy Sizemore,Kansas,A256">Tammy Sizemore</option>
<option value="Ron Jeffries,Maine,Q161">Ron Jeffries</option>
<option value="Tony Clark,West Virginia,G019">Tony Clark</option>
<option value="Mark Sengala,Ohio,Q341">Mark Sengala</option>
<option value="Judy Donato,Iowa,A219">Judy Donato</option>
<option value="Mary Porter,Pennsylvania,G222">Mary Porter</option>
</select>
Then, when I needed to split them back into separate fields, I used explode.
$sr_agent = $_POST['salesman'];
$sa = explode(',', $sr_agent);
$agent_name = $sa[0];
$agent_state = $sa[1];
$agent_office = $sa[2];
I'd recommend not using the value attribute as you did in your work-around solution, as you're basically using the value attribute for something other than its intended use. You can use custom data attributes that are perfect for this...
// cache the state & office elements so we don't have to search the DOM every time
var $state = $("#state");
var $office = $("#office");
$("#salesman").on("change", function() {
// find the selected option
var $selected = $(this).find("option:selected");
// get the associated state and office...
var state = $selected.data("state");
var office = $selected.data("office");
// set the dropdowns
$state.val(state);
$office.val(office);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label for="saleman">Senior Agent: </label>
<select id="salesman" name="salesman">
<option value="" selected="selected"></option>
<option value="Tammy Sizemore" data-state="Kansas" data-office="A256">Tammy Sizemore</option>
<option value="Ron Jeffries" data-state="Maine" data-office="Q161">Ron Jeffries</option>
<option value="Tony Clark" data-state="West Virginia" data-office="G019">Tony Clark</option>
<option value="Mark Sengala" data-state="Ohio" data-office="Q341">Mark Sengala</option>
<option value="Judy Donato" data-state="Iowa" data-office="A219">Judy Donato</option>
<option value="Mary Porter" data-state="Pennsylvania" data-office="G222">Mary Porter</option>
</select>
<label for="state">State: </label>
<select id="state" name="state">
<option value="" selected="selected"></option>
<option value="Iowa">Iowa</option>
<option value="Kansas">Kansas</option>
<option value="Maine">Maine</option>
<option value="Ohio">Ohio</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="West Virginia">West Virginia</option>
</select>
<label for="office">Office Number: </label>
<select id="office" name="office">
<option value="" selected="selected"></option>
<option value="A219">A219</option>
<option value="A256">A256</option>
<option value="G019">G019</option>
<option value="G222">G222</option>
<option value="Q161">Q161</option>
<option value="Q341">Q341</option>
</select>

how to call onclick function on name attribute of an input element by using a regular expression?

I have the following HTML markup:
<select class="form-control travel_mode" name="travel_request[travel_stays_attributes][0][travel_mode]" style="width: 139px;">
<option value=""></option>
<option disabled="true" selected="selected">Please Select</option>
<option value="1">Flight</option>
</select>
<select class="form-control travel_mode" name="travel_request[travel_stays_attributes][1448001168204][travel_mode]" style="width: 139px;">
<option value=""></option>
<option disabled="true" selected="selected">Please Select</option>
<option value="1">Flight</option>
</select>
<select class="form-control travel_mode" name="travel_request[travel_stays_attributes][1448002208899][travel_mode]" style="width: 139px;">
<option value=""></option>
<option disabled="true" selected="selected">Please Select</option>
<option value="1">Flight</option>
</select>
<select class="form-control travel_mode" name="travel_request[travel_stays_attributes][1448002215357][travel_mode]" style="width: 139px;">
<option value=""></option>
<option disabled="true" selected="selected">Please Select</option>
<option value="1">Flight</option>
</select>
I want to call onclick or onchange function on these elements on the name attributes, by writing a regular expression so that I can call a single JS function upon the click of any of the above dropdowns. How can I write the regular expression for the above markup?
You don't need a regular expression; all the elements have a class on them, so you can use that:
$('select.form-control').change(function() {
console.log('I changed value...');
});
If you want to make it more specific to these elements, you could use the name attribute in an attribute starts with selector:
$('select[name^="travel_request[travel_stays_attributes]"]').change(function() {
console.log('I changed value...');
});

javascript get value of <select>

I know that i can do something like that
document.getElementById("whatever").value
But i have code like that
<select id="year_architecture_third_choose" style="display: none">
<option value="" style="display:none;"></option>
<option value="207">Lectures</option>
<option value="208">Courses</option>
<option value="209">Sheets</option>
<option value="210">Others</option>
</select>
<select id="year_architecture_fourth_choose" style="display: none">
<option value="" style="display:none;"></option>
<option value="211">Lectures</option>
<option value="212">Courses</option>
<option value="213">Sheets</option>
<option value="214">Others</option>
</select>
</select>
<select id="year_architecture_second_choose" style="display: none">
<option value="" style="display:none;"></option>
<option value="203">Lectures</option>
<option value="204">Courses</option>
<option value="205">Sheets</option>
<option value="206">Others</option>
</select>
This is just a small part of the code . I don't want to make getElementById() for each one i need better idea
You could use the document.geteElementsByTagName('select') method which will return a collection of all <select> elements in your DOM that you could then loop through and do whatever you originally intended to do on the element.
Reference: document.getElementsByTagName.

Categories