Hide JQuery not working - javascript

I am trying to make a drop-down(B) menu that is hidden at first and when a different form(A) is completed, then this drop-down(B) menu is shown. However, when the page loads, the second drop-down(B) menu is not hidden. Code is below and stored in a php file
<h4>And What Type of Data Are You Focusing On?</h4>
<select name="library_type" id="library_type">
<option value="DNA"> DNA </option>
<option value = "RNA"> RNA </option>
<option value="WGS"> Whole Genome Sequences</option>
<option value="WXS">Whole Exome Sequences</option>
<option value="RNA-Seq">RNA-Seq</option>
<option value = "miRNA-Seq">miRNA-Seq</option>
<option value = "VALIDATION">VALIDATION</option>
<option value = "AMPLICON">AMPLICON</option>
<option value = "ChIP-Seq">ChIP-Seq</option>
<option value = "Bisulfite-Seq">Bisulfite-Seq</option>
<option value = "TARGET_60">TARGET_60</option>
<option value = "TARGET_50">TARGET_50</option>
<option value = "TARGET_61">TARGET_61</option>
<option value = "OTHER">OTHER</option>
</select>
<h4> What Condition are You Interested in? </h4>
<select name="tissueState" id="tissueState">
<option value = "Normal"> Normal </option>
<option value = "Tumor"> Tumor </option>
<option value = "Both"> Both </option>
</select>
<br><br>
<input type="submit" value="Show me Matches">
</form></center>
In a separate file, hideDropDownMenu.js, this is the content of that file.
$("#tissueState").hide();
$(document).ready(function)(){
$('#library_type').change(function(){
var value = $(this).val();
});
});
In the head of the .php file I have this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="hideDropDownMenu.js"></script>
Here is how the page looks


Your code is buggy...
First of all close correctly the document ready and change event.
From this } to this });
And this $(document).ready(function)(){ must change in $(document).ready(function(){
This is the corrected code:
<script>
$("#tissueState").hide();
$(document).ready(function(){
$('#library_type').change(function(){
var value = $(this).val();
});
});
</script>
Try it: https://jsfiddle.net/ougvw8kk/


In order to hide the dropdown during page load, you need to declare the hide statement inside document ready function.
$(document).ready(function)(){
$("#tissueState").hide();
$('#library_type').change(function(){
var value = $(this).val();
});
});

Related

how to get multiple dropdown list value in jQuery when i clone multiple dropdown

when i click button clone is worked but it is showing value only one dropdown list
i want to get value clone multiple dropdown list and show the alertbox
there is my code
$(document).ready(function() {
$('#btnid').click(function() {
$('#idcuntry').clone().attr('id', 'id_' + $(this).index()).insertAfter('#idcuntry');
var a = $('#idcuntry').val();
alert(a);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="idcuntry">
<option value="10">Selection </option>
<option value="20">Pa </option>
<option value="30">India </option>
</select><br/>
<input type="button" value="clone" id="btnid">

The first problem is that you are getting the value of #idcuntry, and there's only one with this ID (which is good, IDs should be unique, so you made the right choice of changing the ID of your clones).
To target multiple elements, you can add a class to them, for example class="countryselect".
Then, .val() will only return the value of the first element. But you can use .map() to get them all in an Array:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#btnid').click(function() {
$('#idcuntry').clone().attr('id', 'id_' + $(this).index()).insertAfter('#idcuntry');
var a = $('.countryselect').map(function() {
return $(this).val();
}).get();
alert(a);
});
});
</script>
<select id="idcuntry" class="countryselect">
<option value="10">Selection </option>
<option value="20">Pa </option>
<option value="30">India </option>
</select><br/>
<input type="button" value="clone" id="btnid">

How to send a value from a select to an input text in html using javascript?

I am trying to send a value to an based on a selection from a dropdown list such as . I want to fetch the value of possiblePhone.id and send it to .
<script>
function copyTextValue() {
var text1 = document.getElementById("source").value;
document.getElementById("destination").value = text1;
}
</script>
<div>
<select th:field="${possiblePhones}">
<option value="0">select phone</option>
<option id="source" onselect="copyTextValue()"
th:each="possiblePhone : ${possiblePhones}"
th:value="${possiblePhone.id}"
th:text="${possiblePhone.model}"></option>
</select>
</div>
<td><input type="text" id="destination"> </td>
For example, if "Samsung" is selected then "1" should be send to the input field and so on. Actually, i do not get any output.

<select id="source" onchange="copyTextValue()">
<option value="0">select phone</option>
<option value="1">samsung</option>
<option value="2">something</option>
</select>
The id="source" attribute should be in <select> element, also change onselect to onchange and move it to <select> element too.
Codepen: https://codepen.io/anon/pen/WVxLpz

You can achieve this by setting the listener to the select element and then query the selected option value.
I made a minimal example with two brands:
<script>
function copyTextValue() {
var e = document.getElementById("select");
var val = e.options[e.selectedIndex].value;
document.getElementById("destination").value = val;
}
</script>
<div>
<select onchange="copyTextValue()" id="select">
<option value="0">select phone</option>
<option value="1">Brand 1</option>
<option value="2">Brand 2</option>
</select>
</div>
<td><input type="text" id="destination"> </td>

one of the simple thing you have to observe here is that you have to capture the event when the dropdown is selected, and pass the current dropdown reference to your method.
<script>
function copyTextValue(selectedOption) {
if(selectedOption.selectedIndex <= 0){
document.getElementById("destination").value = '';
return;
}
var selectedOptionValue = selectedOption.value;
document.getElementById("destination").value = selectedOptionValue;
}
</script>
<div>
<select onChange="copyTextValue(this);">
<option value="0">select phone</option>
<option value="1">select first phone</option>
<option value="2">select second phone</option>
<option value="3">select third phone</option>
<option value="4">select fourth phone</option>
</select>
</div>
<td><input type="text" id="destination"> </td>
here you are also trying to avoid to pass any value to the textbox when the first element is selected. #kryptur's answer is also correct, but this is simpler.

You're using Thymeleaf. For these you to create a form to send you data to the server.
Follow this link for documentation for your exact problems.
https://www.thymeleaf.org/doc/tutorials/2.1/thymeleafspring.html#creating-a-form
As Frameworks like Thymeleaf usually store state on the server which means you update server first - and then your UI gets updated.

what value return is the value of the select field what you need to do is get the text of selected option i.e
function copyTextValue() {
var selectNode = document.getElementById("source");
enter code here
document.getElementById("destination").value =
selectNode .options[selectNode .selectedIndex].textContent;
}

Get a select box by name and set another select box by same name?

I am building a fairly complex form-- I need to copy some data between one and another and I am using jQuery to do this. The only road block I am running into is setting the state.
I have two drop downs, one us using the full state name as the value and the other is using the state abbreviation as the value. The names are the same-
so on form 1 it looks like
<option value="Illinois">Illinois</option>
and form 2 it looks like
<option value="IL">Illinois</option>
Each form has its own unique css selector. How can I set the selected value of form 2 to match what is in form 1 using jQuery?
I do not have any control over the forms, just need to manipulate the input. Have tried using a name selector in jQuery, but I'm not having any luck.
Thank you.

You can do something like this
<select id="fullName">
<option value="Maryland" data-abbr="MD">Maryland</option>
<option value="Illinois" data-abbr="IL">Illinois</option>
<option value="Delaware" data-abbr="DE">Delaware</option>
</select>
<select id="abbr">
<option value="MD">Maryland</option>
<option value="IL">Illinois</option>
<option value="DE">Delaware</option>
</select>
And your jQuery
$('body').on('change', '#fullName', function(){
var abbr = $(this).find('option:selected').data('abbr');
$('#abbr').val(abbr);
});

Try this
<form id="form1" name="form1">
<select name="states" onchange="changeselect(this)">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
</form>
<form id="form2" name="form2">
<select name="states">
<option value="opt1">option1</option>
<option value="opt2">option2</option>
<option value="opt3">option3</option>
<option value="opt4">option4</option>
<option value="opt5">option5</option>
</select>
</form>
function changeselect(elem)
{
var value1 = $(elem).val();
$('#form2 select option').removeAttr('selected');
$('#form2').find('select option').each(function(){
var value2 = $(this).html();
if(value1 == value2)
{
var selected = $(this).attr('value');
$('#form2 select').val(selected);
}
});
}

If you create 2 arrays which exactly correspond with one another:
var StateNames = ['Alabama','Alaska','Arizona','Arkansas','California','Colorado','Connecticut','Delaware','Florida','Georgia','Hawaii','Idaho','Illinois','Indiana','Iowa','Kansas','Kentucky','Louisiana','Maine','Maryland','Massachusetts','Michigan','Minnesota','Mississippi','Missouri','Montana','Nebraska','Nevada','New Hampshire','New Jersey','New Mexico','New York','North Carolina','North Dakota','Ohio','Oklahoma','Oregon','Pennsylvania','Rhode Island','South Carolina','South Dakota','Tennessee','Texas','Utah','Vermont','Virginia','Washington','West Virginia','Wisconsin','Wyoming'];
var StateAbbreviations = ['AL','AK','AZ','AR','CA','CO','CT','DE','FL','GA','HI','ID','IL','IN','IA','KS','KY','LA','ME','MD','MA','MI','MN','MS','MO','MT','NE','NV','NH','NJ','NM','NY','NC','ND','OH','OK','OR','PA','RI','SC','SD','TN','TX','UT','VT','VA','WA','WV','WI','WY'];
You can:
get the value from the first option list;
find that value's index in the first array; (hint: use indexOf)
use the same index to find out what the corresponding abbreviation is in the second array;
use the returned abbreviation to locate the correct option in the second option list

Select2 - display selected item after refresh page

I use select2 to (https://select2.github.io) to bulding drop down list. I have problem with display selected item after refresh the page (my select is stored in DB). Where excalcly have I add select or selected="selected" ?
I can't add this in because every user of my website selects own item in his settings.
<script>
$(document).ready(function() {
$(".js-example-basic-single").select2({
});
$("select").select2({
});
});
</script>
<select class="js-example-basic-single" name="field">
<option value="city1">city1</option>
<option value="city2">city2</option>
</select>

<script>
$(document).ready(function() {
var storedValue = 'city2';
var $select = $(".js-example-basic-single").select2({});
$select.select2('val', 'storedValue');
});
</script>
<select class="js-example-basic-single" name="field">
<option value="city1">city1</option>
<option value="city2">city2</option>
</select>
How you get the stored value from your server is up to you / stack. If you don't have a backend you can use localStorage to store what the user selected.

How to get selected value from select tag using javascript and go to another page using that value

I have a select tag where it contains some values, as shown below:
<select id="menu" SIZE=6 onChange="go()">
<option value="">Select city</option>
<option value="delhi" >delhi</option>
<option value="kolkata" >kolkata</option>
<option value="mumbai" >mumbai</option>
</select>
Now i am using below script for this, where it get the selected value from the drop down,
<script>
function go(){
var sel = document.getElementById('menu');
var sv = sel.options[sel.selectedIndex].value;
// here i need to make a specific link using this selected drop down value
}
</script>
I just need to know how can i make use of this selected value and go to specific link like
window.location.href='getCityDetails.jsp?c=sv'; // this is not working properly
Can anyone suggest me best solution for this.

<script>
function go(){
var sel = document.getElementById('menu');
var sv = sel.options[sel.selectedIndex].value;
window.location.href='getCityDetails.jsp?c=' + sv;
}
</script>
Hope it helps you

HTML :
<select id="menu" SIZE=6 onChange="go(this.value)">
<option value="">Select city</option>
<option value="delhi" >delhi</option>
<option value="kolkata" >kolkata</option>
<option value="mumbai" >mumbai</option>
</select>
Javascript :
function go(desination){
if (destination != ''){
window.location.href='getCityDetails.jsp?c=' + desination;
}
}

you need to concatenate the string properly. try this:
window.location.href='getCityDetails.jsp?c=' + sv;

-- You can use--
var TaskType = document.form1.SelTaskType.value;
-- TaskType will display selected option from below
<select id="SelTaskType" name="SelTaskType" >
<option selected>-- select --</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>

Categories

Resources