I got the following html:
<td class="" data-id="46" contenteditable="true">
<select class="form-control">
<option data-key="end" selected>Opt1</option>
<option data-key="operator_transfer">Opt2</option>
<option data-key="process_script">Opt3</option>
</select>
</td>
I need to get data attribute of the selected option. I am trying to do it that way:
var cell = $row.find(':nth-child(4)');
dataattr = cell[0].getAttribute('data-id');
var selectObject = cell.find("select");
if(selectObject.length){// if it is a select
localobj[dataattr] = selectObject[0].getAttribute('data-key');//val(); previously it was val() here but now I want data-key
}
I tried with this:
$(selectObject/*need to insert something here*/ + ' option:selected').data('key');
but it is showing me an error saying that it is an object Object. I need to insert something after selectObject. Any ideas how to fix that?
Thank you.
Try this $('.form-control').children('option:selected').attr('data-key') using jquery function attr()
console.log($('.form-control').children('option:selected').attr('data-key'))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td class="" data-id="46" contenteditable="true">
<select class="form-control">
<option data-key="end" selected>Opt1</option>
<option data-key="operator_transfer">Opt2</option>
<option data-key="process_script">Opt3</option>
</select>
</td>
For your code you could do like this
var cell = $row.find(':nth-child(4)');
dataattr = cell[0].getAttribute('data-id');
var selectObject = cell.find("select");
if(selectObject.length){// if it is a select
localobj[dataattr] = selectObject[0].getAttribute('data-key');
}
$(selectObject).children('option:selected').data('key');
$('.form-control').change(function(){
alert($('.form-control').find(':selected').attr('data-key'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td class="" data-id="46" contenteditable="true">
<select class="form-control">
<option data-key="end" selected>Opt1</option>
<option data-key="operator_transfer">Opt2</option>
<option data-key="process_script">Opt3</option>
</select>
</td>
You just need to use the jQuery data() method with the right selector, like this:
$('select option:selected').data('key');
Demo:
var key = $('select option:selected').data('key');
console.log(key);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td class="" data-id="46" contenteditable="true">
<select class="form-control">
<option data-key="end" selected>Opt1</option>
<option data-key="operator_transfer">Opt2</option>
<option data-key="process_script">Opt3</option>
</select>
</td>
And you can update your code like this:
if (selectObject.length) { // if it is a select
localobj[dataattr] = selectObject[0].getAttribute('data-key');
}
$(selectObject).find('option:selected').data('key');
Related
Good morning all !
I use Laravel 5 and for select the class "selectpicker".
I wish I could do that when I click on one of the options to make this disable or none. Because I create a div with the content of the option just below. So if the select option is not disable or none, it will create a div again.
Two days that I can not do it ..
<select id="interlocutorsList" name="interlocutorsList" class="selectpicker" data-width="100%" data-style="btn-info select2" data-live-search="true">
<option id="titleSelectInterlocutor" class="" value="" selected>Faites un choix</option>
#foreach( $othersInterlocutors as $interlocutor)
<option value="{{$interlocutor->id}}" id="option{{$interlocutor->id}}" class="" style="overflow: hidden; width:100%;" data-tokens="">{{$interlocutor->name.' '.$interlocutor->firstName}}
</option>
#endforeach
</select>
$("#interlocutorsList").change(function () {
$('#titleSelectInterlocutor').addClass("d-none");
var interlocutorSelect=$("#interlocutorsList").val();
$('#option'+interlocutorSelect).addClass("d-none");
var nameSel=interlocutorsTab[interlocutorSelect];
$(".interlocutorSel").append("<div class='row rowSensor"+interlocutorSelect+"'><div class='col-lg-12 mb-1'><p class='d-inline' style='color: #000;'>"+nameSel+"</p><input id='interlocutor"+interlocutorSelect+"' type='hidden' name='interlocutor"+interlocutorSelect+"' value='on'><button type='button' id='btnSup" + interlocutorSelect + "' class='btn btn-outline-info buttonSubmit float-right'>-</button></div></div> ");
});
$(".interlocutorSel").on("click", "button[id^='btnSup']", function () {
var idBtnClick = $(this).attr("id");
var nbCustom = idBtnClick.substring(6);
$('.rowSensor' + nbCustom).remove();
$('#option'+nbCustom).removeClass("d-none");
});
You can add the disabled='disabled' in the option when on event.
<option value="opel" disabled='disabled'>Opel</option>
If you are using jQuery < 1.6 do this:
jQuery('#option'+nbCustom).attr("disabled", 'disabled');
If you are using jQuery 1.6+:
jQuery('#option'+nbCustom).prop("disabled", true);
Example bellow.
<!DOCTYPE html>
<html>
<body>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel" disabled='disabled'>Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
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;
}
How to add multiple options from the selection box to the data attribute data-clc in the hyperlink?
Working in textarea but TestLink hyperlink not working.
$("#selection").change(function() {
$('#selected').html(' ');
$("#selection option:selected").each(function() {
var $this = $(this);
if ($this.length) {
var selText = $this.text();
console.log(selText);
$('#selected').append(selText + ', ');
$('#comeMan').attr('data-bid', selText);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple="" style="width:200px;" id="selection" name="fm_fields[]">
<option value="90" selected>Collection1</option>
<option value="91" selected>Collection2</option>
<option value="92">Collection3</option>
<option value="93">Collection4</option>
<option value="94">Collection5</option>
<option value="95">Collection6</option>
</select>
<br/>
<br/>
<div>
TestLink
<textarea id="selected" rows="1" cols="50" readonly></textarea>
</div>
Goal
For example:
<a href="#"
id="comeMan" data-clc=" Collection2,Collection3,Collection4">TestLink</a>
Rather than build up a string of the selected items, you can just set the attribute to the value (val() in JQuery) of the select element.
Also, to more easily work with data- attributes, JQuery provides the .data() method (used below);
$("#selection").change(function() {
$('#comeMan').data('clc', $('#selection').val());
console.log( $('#comeMan').data('clc'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple style="width:200px;" id="selection" name="fm_fields[]">
<option value="90">Collection1</option>
<option value="91">Collection2</option>
<option value="92">Collection3</option>
<option value="93">Collection4</option>
<option value="94">Collection5</option>
<option value="95">Collection6</option>
</select>
<br/>
<br/>
<div>
TestLink
</div>
So, I have a 2 select tags and during the
onChange event of the second select tag; I want to pass the values of the 2 select tags
<td>District:
<div>
<select name="district" id="district" onchange="getZone(this.value)">
<option value="ALL">ALL</option>
<?php
include_once 'newcompute.php';
$computation = new newcompute();
echo $computation->getDistrict();
?>
</select>
</div>
</td>
<td>Barangay:
<div id="barangay" name="barangay">
<select onchange="loadReport(barangay.value,district.value)">
<option>Select a Barangay</option>
<option value="ALL">ALL</option>
</select>
</div>
</td>
</tr>
So, I tried doing the onchange="loadReport(barangay.value,district.value)" but I only get
a UNDEFINED value for district.value
How do I get loadReport to pass the current selected value of select tag district?
You can retrieve the other tag in the function itself. No need to pass it from here.
function loadReport(barangayValue)
{
var district = document.getElementById('district');
var districtValue = district.value;
//Your stuff
}
Try this way
<select onchange="loadReport(this.value,document.getElementById('district').value)">
<option>Select a Barangay</option>
<option value="ALL">ALL</option>
</select>
<td><select class="dropDownLists" name=reportFlag id="reportFlag" tabindex="10" style="WIDTH: 160px" onchange='onFocusReportingOptions();'>
<option value="Select">Select</option>
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
</td>
After I select the option Yes or No, below TD's should be shown or not to the user.
<td id="first_td"><select class="dropDownLists" name=reportingOption id="reportFlag" tabindex="10" style="WIDTH: 160px" onchange='callonChange();'>
<option value="Select">Select</option>
<option value="MyTell">Report via tool</option>
<option value="Manual">Report via manually</option>
</select>
</td>
<td id="second_td"><select class="dropDownLists" name=acctFlag id="acctFlag" tabindex="10" style="WIDTH: 160px" onchange='callonChange();'>
<option value="Select">Select</option>
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
</td>
My questions what are the ways to control the display of the td?
one way I can do is with the DIV tags but if we use Div tag i learnt that we need to use table inside the td, in that case then the alignment will be a problem
can any one suggest any other way to get this implemented?
You can use the style visibility instead of display.
Check this code, if this the one suit your needs.
CSS
.hiddenTD{
visibility: hidden;
}
.visibleTD{
visibility: visible;
}
JS
function onFocusReportingOptions(val){
var firstTD = document.getElementById('first_td');
var secondTD = document.getElementById('second_td');
if(val == 'Y') {
firstTD.className = "visibleTD";
secondTD.className = "visibleTD";
} else {
firstTD.className = "hiddenTD";
secondTD.className = "hiddenTD";
}
}
Change something on your HTML
<td>
<select class="dropDownLists" name=reportFlag id="reportFlag" tabindex="10" style="WIDTH: 160px" onchange='onFocusReportingOptions(this.value);'>
<option value="Select">Select</option>
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
</td>
I think you would like imitate "disable"(not hide)
$('td.YOUR CLASS').css('opacity', '0.5').click(function () {
event.preventDefault();
return false;
});
Give the TDs an ID. Then use Javascript to hide the element with the relevant ID (via the CSS display attribute).
<td id="first_td">content</td>
<td id="second_id"><content</td>
var elem = document.getElementById("first_td");
elem.style.display = "none";
The logic for which TD is hidden or shown can be encapsulated in an event handler for the select drop-down.
Are you using tables for layout?! Use divs like such:
DEMO
Then you can easily style it to your needs. (Positioning, etc.)