How to get the select element by option value - javascript

I am trying to get the whole select element by option value using jquery but not getting it. The id of the select element is dynamic and not loaded yet. So I can't use id to get the select element. Therefore trying to get using option value.
Here is the example of select element that I am trying to get:-
<select sf-field-model="" id="{{form.formId}}_{{interp(form.formTabId,{'$index':$index, value: item}) || $index}}" ng-disabled="form.readonly" sf-changed="form" class="form-control input-sm c" schema-validate="form" ng-options="item.value as item.name group by item.group for item in form.titleMap" name="_value" ng-model="item['_value']">
<option value="?" selected="selected"></option>
<option label="TEST-1" value="string:TEST1">TEST-1</option>
<option label="TEST-2" value="string:TEST2">TEST-2</option>
<option label="TEST-3" value="string:TEST3">TEST-3</option>
<option label="TEST-4" value="string:TEST4">TEST-4</option>
<option label="TEST-5" value="string:TEST5">TEST-5</option>
</select>
I tried the following:-
var testSelectorText = "select['option[value='?']']";
angular.element(document.querySelectorAll(testSelectorText));

This line uses jquery to find the select element you want, using an option value to identify it.
sel = $("select option[value='string:TEST2']").closest("select");
Let me know if this isn't what you wanted.
Demo
// Find the option with known value
// Find the closest 'select'
sel = $("select option[value='string:TEST2']").closest("select");
// Print name to demonstrate we found the item
console.log(sel.attr("name"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select sf-field-model="" id="{{form.formId}}_{{interp(form.formTabId,{'$index':$index, value: item}) || $index}}" ng-disabled="form.readonly" sf-changed="form" class="form-control input-sm c" schema-validate="form" ng-options="item.value as item.name group by item.group for item in form.titleMap" name="_value" ng-model="item['_value']">
<option value="?" selected="selected"></option>
<option label="TEST-1" value="string:TEST1">TEST-1</option>
<option label="TEST-2" value="string:TEST2">TEST-2</option>
<option label="TEST-3" value="string:TEST3">TEST-3</option>
<option label="TEST-4" value="string:TEST4">TEST-4</option>
<option label="TEST-5" value="string:TEST5">TEST-5</option>
</select>

if you want to find the select by an options value, then try the following:
$("select option[value='string:TEST3']").parent();
demo
var testSelectorText = $("select option[value='string:TEST3']").parent();
console.log(testSelectorText.attr("id"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select sf-field-model="" id="{{form.formId}}_{{interp(form.formTabId,{'$index':$index, value: item}) || $index}}" ng-disabled="form.readonly" sf-changed="form" class="form-control input-sm c" schema-validate="form" ng-options="item.value as item.name group by item.group for item in form.titleMap" name="_value" ng-model="item['_value']">
<option value="?" selected="selected"></option>
<option label="TEST-1" value="string:TEST1">TEST-1</option>
<option label="TEST-2" value="string:TEST2">TEST-2</option>
<option label="TEST-3" value="string:TEST3">TEST-3</option>
<option label="TEST-4" value="string:TEST4">TEST-4</option>
<option label="TEST-5" value="string:TEST5">TEST-5</option>
</select>

This is what I used recently to do exactly that.
$('option[value="string:TEST1"]').closest('select')

set class to select
<select class='myClass' sf-field-model="" id="{{form.formId}}_{{interp(form.formTabId,{'$index':$index, value: item}) || $index}}" ng-disabled="form.readonly" sf-changed="form" class="form-control input-sm c" schema-validate="form" ng-options="item.value as item.name group by item.group for item in form.titleMap" name="_value" ng-model="item['_value']">
<option value="?" selected="selected"></option>
<option label="TEST-1" value="string:TEST1">TEST-1</option>
<option label="TEST-2" value="string:TEST2">TEST-2</option>
<option label="TEST-3" value="string:TEST3">TEST-3</option>
<option label="TEST-4" value="string:TEST4">TEST-4</option>
<option label="TEST-5" value="string:TEST5">TEST-5</option>
</select>
<button onclick="callMe()">get Value</button>
wirte script as Below
function callMe()
{
var value = $("select.myClass").val();
console.log(value);
}

Related

Automatically changing input values when selected a new element

How can I get input values to change dynamically when I select some element from select tag. I want in this input box to be shown a proper value when I change select option.
<select onchange="changevalue()" id="selectingg">
<option value="0">...</option>
<option value="1">Comedy</option>
<option value="2">Horror</option>
<option value="3">Action</option>
<option value="4">Sci-fi</option>
<option value="5">Adventure</option>
<option value="6">Documentary</option>
<option value="7">Anime</option>
</select>
<input type = "text" id="inputting"></input>
You could use addEventListener on change event and get the value from the event.target dropdown like so:
document.getElementById("dropdownCategory").addEventListener('change', event => document.getElementById('categorySelected').value = event.target.value);
<select id="dropdownCategory">
<option value="0">...</option>
<option value="1">Comedy</option>
<option value="2">Horror</option>
<option value="3">Action</option>
</select>
<input type="text" id="categorySelected"></input>
The below code is working fine for me you may try this code.
In below code I am assigning select value to input tag value.
function changevalue(){
document.getElementById("inputting").value =
document.getElementById("selecting").value;
}
<select onchange="changevalue()" id="selecting">
<option value="0">...</option>
<option value="1">Comedy</option>
<option value="2">Horror</option>
<option value="3">Action</option>
<option value="4">Sci-fi</option>
<option value="5">Adventure</option>
<option value="6">Documentary</option>
<option value="7">Anime</option>
</select>
<input type = "text" id="inputting"></input>

How to validate multiple drop down list in jquery

HTML :
<select type="text" class="que_ans" name="answer[12]" id="answer_12" size="1">
<option value="0" selected> -- Select Response -- </option>
<option value="1">Not Satisfied</option>
<option value="2">Somewhat Satisfied</option>
</select>
<select type="text" class="que_ans" name="answer[13]" id="answer_13" size="1">
<option value="0" selected> -- Select Response -- </option>
<option value="1">Not Satisfied</option>
<option value="2">Somewhat Satisfied</option>
</select>
How to validate the drop down list using array name answer[12] ?
Add class and title attributes on your dropdown element like:
<select type="text" class="que_ans required" name="answer[12]" id="answer_12" size="1" title="This is required field" >
<option value="0" selected> -- Select Response -- </option>
<option value="1">Not Satisfied</option>
<option value="2">Somewhat Satisfied</option>
</select>
<select type="text" class="que_ans required" name="answer[13]" id="answer_13" size="1" title="This is required field">
<option value="0" selected> -- Select Response -- </option>
<option value="1">Not Satisfied</option>
<option value="2">Somewhat Satisfied</option>
</select>
And add following script at the end of your page
<script>
$('select.required').each(function () {
var message = $(this).attr('title');
if($(this).val() == '' || $(this).val() == 0) {
alert(message);
$(this).focus();
breakout = true;
return false;
}
}
});
</script>
I hope, it will fulfill your requirement.
you could use attribute selector $(select[name="answer[12]"]) for specific ones
or more generic $(select[name]) to select all <select> with name attribute.
also val() method can be used for the getting the selected item.
eg: $(select[name="answer[12]"]).val()

Dynamic select options in ng-repeat

I would like to have a dynamic select option values bind to select dropdown.
<div ng-repeat="condition in conditions">
<div class="form-group">
<select ng-model="condition.Description" class="form-control">
<option value="">- Select -</option>
<option ng-value="{{age.Description}}" ng-repeat="age in ageConditions">{{age.Description}}</option>
</select>
</div>
</div>
I like
age in ageConditions
to be dynamic. I also tried ng-options="dynamicOptions" but it always bind to the same list.
I want to achieve this with ng-repeat.
Repeat 1:
<select ng-model="condition.Description" class="form-control">
<option value="">- Select -</option>
<option ng-value="ageCondition1">ageCondition1</option>
<option ng-value="ageCondition2">ageCondition2</option>
</select>
Repeat 2:
<select ng-model="condition.Description" class="form-control">
<option value="">- Select -</option>
<option ng-value="yearsCondition1">yearsCondition1</option>
<option ng-value="yearsCondition2">yearsCondition2</option>
</select>
As shown i want the option in select to be dynamic in ng-repeat.
Any idea?
<select ng-model="condition.Description" class="form-control">
<option value="">- Select -</option>
<option value="getValue(age, $parent.$index)" ng-repeat="age in ageConditions"> getText(age, $parent.index)</option>
</select>
Please note that $parent.$index is used.
the dynamic nature van be achieved used functions which return the value based in $index.
$scope.getValue = function(age, index) {
if(index === 1) return age.Desciption else age.years;
}
$scope.getText = function(age, index) {
if(index === 1) return age.Desciption else age.years;
}
hope this helps
Solved this by creating a directive that created a new scope for select.

Get DropDown value using its name in JQuery

I have these SELECTs in my page
<select id="select_status_id44" name="select_status_id[44]" class="inputbox" id = "status_id_44">
<option value="1">Pending</option>
<option value="2" selected="selected">Confirmed</option>
<option value="3">Cancelled</option>
<option value="4">Refunded</option>
<option value="5">Shipped</option>
<option value="6">Paid</option>
<option value="7">Complete</option>
</select>
And also this one
<select id="select_status_id78" name="select_status_id[78]" class="inputbox" id = "status_id_44">
<option value="1">Pending</option>
<option value="2" selected="selected">Confirmed</option>
<option value="3">Cancelled</option>
<option value="4">Refunded</option>
<option value="5">Shipped</option>
<option value="6">Paid</option>
<option value="7">Complete</option>
</select>
I want to do is that whenever any of these two SELECT is CHANGED, it shoul dget the select_status_id[ID] ID inside that tag...
For now I have simply done this but it does not work
$('select[name=select_status_id]').change(function() {
alert('dsada');
});
I know that I should not get using ID attribute because they are different for both ... but NAME attribute is same
Try this way
$('select[name^="select_status_id"]').change(function() {
alert($(this).attr('name').split('[')[1].replace(']',''));
});
DEMO
You can try this on change for each select.
$("#select_status_id44").change(function(){
var val = "select_status_id["+$(this).val()+"]";
$(this).prop("name", val);
console.log(val);
});
UPDATE: Check this Fiddle : http://jsfiddle.net/JayKandari/L8TWN/1
if you can add a data-property to your select
<select data-id-value="42" ..... >
$('select').on('change', function() {
console.log ( $(this).data('id-value') );
});

AngularJS <select> not saving value in object?

I have this select element in a row (of which there can be a few) which represents an item. But the scope for manufacturer does not update when this is selected. The default for the item's manufacturer attribute is null (since when it's created - it no manufacturer has been selected yet)
<select ng-model="manufacturer" ng-options="manufacturers.name for manufacturers in manufacturers" ng-change="change()" class="ng-valid ng-dirty">
<option value="" selected="selected" class=""> --Select a Manufacturer--</option>
<option value="0">Choice1</option>
<option value="1">Choice2</option>
<option value="2">Choice3</option>
</select>
I guess my question is - how do I get the manufacturer attribute in the item to update with the select box?
Thanks!
If it helps - here's the scope of the cams item:
$scope.cams = [
{channels:1, manufacturer:null},
{channels:1, manufacturer:null}
];
Turns out ng-model="manufacturer" should have been ng-model="cam.manufacturer":
<select ng-model="cam.manufacturer" ng-options="manufacturers.name for manufacturers in manufacturers" ng-change="change()" class="ng-valid ng-dirty">
<option value="" selected="selected" class=""> --Select a Manufacturer--</option>
<option value="0">Choice1</option>
<option value="1">Choice2</option>
<option value="2">Choice3</option>
</select>
Now it works perfectly.
You could use this:
HTML
<selectmultiple ng-model="selectedValues">
<option ng-repeat="lang inLanguages" value="{{lang.name}}" ng-click="selected(selectedValues)">{{lang.name}}</option>
</select>
angularjs:
$scope.selected = function(nowSelected){
$scope.selectedValues = [];
if( ! nowSelected ){
return;
}
angular.forEach(nowSelected, function(val){
$scope.selectedValues.push(val);
});
};

Categories