We Keep Coding

selected in select option give wrong attribute value

I want to display a select with all the option of my enum and change the value to update my database.
To do so:
I have an enum:
export enum SubscriptionEnum {
DAILY= 'DAILY',
ANNUAL= 'ANNUAL',
HALF-YEARLY = 'HALF-YEARLY ',
QUARTERLY = 'QUARTERLY ',
MONTHLY = 'MONTHLY ',
}
In my .ts file i create my enum var:
SubscriptionEnum = SubscriptionEnum ;
And then i display the option in my .html:
<p>{{client.subscription}}</p> // here it display what is registered in my db, in this case "ANNUAL"
<label for="subscription">Subscription:</label>
<select #subscriptionid="subscription">
<option value="{{option.key}}"
*ngFor="let option of SubscriptionEnum | keyvalue">
{{option.value}}
</option>
</select>
This example give me the select with all option and the value change in the view page when i clicked on a new option.
Then, i add the (change) in the select to call a method that change the content of the client subscription in the db. I did it like that:
.html:
<p>{{client.subscription}}</p> // here it display what is registered in my db, in this case "ANNUAL"
<label for="subscription">Subscription:</label>
<select (change)="changeInfo(subscription )" #subscription id="subscription">
<option value="{{option.key}}"
*ngFor="let option of SubscriptionEnum | keyvalue">
{{option.value}}
</option>
</select>
In my changeInfo i send the event and take the event.id and the event.value to update my db and it works because the select option change when i click on it and the <p>{{client.subscription}}</p> that is a value of my db take the good value.
Then i wanted to add a selector so my option value take directly the good value and this is not working ...
I add it like that:
<p>{{client.subscription}}</p> // here it display what is registered in my db, in this case "ANNUAL"
<label for="subscription">Subscription:</label>
<select (change)="changeInfo(subscription )" #subscription id="subscription">
<option value="{{option.key}}"
selected="{{option.key == client.subscription}}"
*ngFor="let option of SubscriptionEnum | keyvalue">
{{option.value}}
</option>
</select>
This give highlight me my sentence and tell me "Wrong attribute method" and when i reload my page my div contains the good value which is "ANNUAL" but my option is equal to QUARTERLY. If i click to change the option, the good value will be saved in my db but the display of my select selector will be wrong.
What do i not understand ? Thank you for your help

There is a subtle difference between two similar Angular syntaxes:
selected="{{option.key == client.subscription}}"
and
[selected]="option.key == client.subscription"
There are both property bindings but the former assigns interpolated value to property.
It means that even in case of falsy values selected property will get true;
el.selected = 'false'
because string is a truthy value in js.
So you can consider the following options:
Use correct property binding:
[selected]="option.key == client.subscription"
Use value binding on <select> tag instead:
<select #subscription id="subscription" [value]="client.subscription">
<option value="{{option.key}}"
*ngFor="let option of SubscriptionEnum | keyvalue">
{{option.value}} {{option.key == client.subscription}}
</option>
</select>

Jquery/JS script to handle multiple selection on my JSP Page

On my JSP Page have select field like this, Need to write a script- SCript should be like sending value from front end as per user selection. If selected is ALL US than all 4 entries should be selected, If all NJ than all inside NJ Should be selected and sent back to database in sql query.
<select multiple="multiple" class="form-control" id="SelectRegion" name="SelectRegion">
<option value="0" selected="selected">All(US)</option>
<option value="00001">All (NJ) </option>
<option value="123">Ship -1008 (NJ - 123) </option>
<option value="234">Ship -4120 (NJ - 234) </option>
<option value="00040">All (CA) </option>
<option value="345">Ship -1008 (CA - 345) </option>
<option value="567">Ship -4120 (CA - 567) </option>
</select>

If you're going to hardcode the specific values you want selected, then you can just set the values of your select tag directly using jQuery like so:
if ($("#SelectRegion").val() == 0) {
$("#SelectRegion").val(["123", "234", "345", "567"]);
}
Otherwise, you can add a class name to the elements for US and NJ and have some jQuery trigger whatever event you would like to select them dynamically:
if ($("#SelectRegion").val() == 0) {
$('.US').prop("selected", true);
}
If you don't necessarily need the selection reflected on the front end and just need the corresponding values, then you can again use class names to iterate through the values:
if ($("#SelectRegion").val() == 0) {
$(".US").each(function() {
// do something
});
}

Making an "all" data category when filtering results in second dropdown menu (jQuery) [duplicate]

This question already has answers here:
Show Hide select options based on previous selection dropdown in Jquery or Javascript
(3 answers)
Closed 4 years ago.
I'm making two dropdown menus. The second menu will be filtered according to the selection in the first menu. The first will be a list of over 20 regions; the second menu will have three transportation options.
Most of the regions have only one transportation option, "car." One region is an exception and has "bike," "car" and "walk." (I tried to do an if/else but couldn't figure it out; I'm not well-versed in jQuery.) I want to have most of the regions in the same data-category, a simple "all." The problem is that I haven't been able to figure out how to create an "all" category because there's only two categories but many different values.
<form name="locator">
<select class="selectregion" id="regionselector" name="selectregion">
<option value="" selected="selected">Select Region</option>
<option data-category="all" value="al1">Alabama: Birmingham</option>
<option data-category="all" value="al2">Alabama: Montgomery</option>
<option data-category="all" value="al3">Alabama: Tuscaloosa</option>
<option data-category="all" value="ga1">Georgia: Atlanta</option>
<option data-category="all" value="ga2">Georgia: Augusta</option>
<option data-category="bikewalk" value="ga3">Georgia: Foo</option>
</select>
<select class="vehicle" id="vehicleselector" name="selectvehicle">
<option value="" selected="selected">Select Transportation</option>
<option data-value="all" value="car">Car</option>
<option data-value="bikewalk" value="bike">Bike</option>
<option data-value="bikewalk" value="walk">Walk</option>
</select>
</form>
My JavaScript (customizing code in this post:
$('#regionselector').change(function() {
var $options = $('#vehicleselector')
.val('')
.find('option')
.show();
if (data-value != '0')
$options
.not('[data-category="' + data-value + '"],[data-category=""]')
.hide();
});
I replaced this.value with data-value and unsurprisingly it didn't work. Right now, nothing filters down.
What can I do to show "car" for every region and "car," "bike," and "walk" for the one exception? (Foo, Georgia in this example). Thank you for your help.
JSFiddle
UPDATE: The post suggested as a duplicate – where classes are used instead of data-categories – solved the problem. Combining that code with mine, just use "all" and "bikewalk" as classes for Foo (the region with all three vehicle options) and "all" as the single class on the rest. Then bike/car/walk are the options on Foo and car is the option for the other regions.

You can think in reversed approach. All options are hidden and on select action show right options.
$('#regionselector').change(function() {
// always on change hide all options
$('#vehicleselector option').not('[value=""]').hide();
// get selected value from #regionselector
let option = $(this).find('option[value="' + $(this).val() + '"]');
// get value start with 2 chars
let value = option.val().substring(0,2);
// get all options start with value
let optionsStartWithValue = $(this).find('option[value^="' + value + '"]');
// for each options for region show vehicle
optionsStartWithValue.each(function(i, v) {
// show all options in #vehicleselector which contain selected data category
$('#vehicleselector option[data-value="' + $(v).data('category') + '"]').show();
});
});
// reset values
$('#vehicleselector').change(function() {
if($(this).val() == '') {
$('#regionselector').val('');
}
});
JSFIDDLE

Javascript jQuery - selecting select box option only works sometimes

the project is an MVC project writen in PHP
I have an AJAX call in a veiw that echoes, into a div, a bit of Javascript that does some things on the page. At the end of the script is a piece of JQuery that should change a select boxes selected option. I did plenty of research into switching select options on this website and others, and after some playing around i got this bit of code to work:
function filterSet(optValue){
$("#mySelect option").prop('selected', false)
.filter('[value="'+ optValue +'"]')
.prop('selected', true);
}
The strange thing is, that sometimes it works, sometimes it doesnt. Testing it over the last hour or so, it hasent worked once, but it did work before that, and the only change to the code that i made is a change of the enclosing method name.
the error the console is giving is 'ReferenceError: maple is not defined' where 'maple' is the word in the optValue variable.
ReferenceError: maple is not defined
i dont understand why i would get an undefined error considering the value of the select option is hardcoded into the select html, and ive tried the jquery with hardcoding the option value to what the variable is suppose to pass in, but i still get the same error, this is strange because there once was a time when this code worked perfectly! more than once actually, it worked when testing it several times! but know its not.
select box html:
<select id="mySelect">
<option value = 'all' selected> Ward </option>
<option value = 'maple'> Maple </option>
<option value = 'oak'> Oak </option>
<option value = 'w3'> Ward 3 </option>
<option value = 'w4'> Ward 4 </option>
<option value = 'w5'> Ward 5 </option>
<option value = 'w6'> Ward 6 </option>
</select>
can anyone shed some light on this?
how the filterSet method is called. An ajax call causes this script to be echoed into a div on the page, on the success callback of the ajax call filterSet() is called.
echo '
<script type="text/javascript">
function locateSpecific(){
scale = 1;
height =' . $height . '
width =' . $width . '
var imageUrl = "' . $imageURL . '";
var bounds = new L.LatLngBounds([0, 0], [height / scale,width / scale]);
map.removeLayer(markerGroup);
L.imageOverlay(imageUrl, bounds, { noWrap: true, maxZoom: 3, minZoom: -3 }).addTo(map);
}
filterSet('.$loc.');
</script>
';

Your problem lies in the PHP code. You aren't quoting the string that you are passing to the function, so it thinks that it's a reference.
Solution:
Here is the erroneous line:
filterSet('.$loc.');
You need to make sure to output quotes around it:
filterSet("'.$loc.'");
Explanation:
When $loc is set to the string "maple" it will output the following string to the web browser.
filterSet(maple);
The javascript interpreter will then try to find the variable maple instead of using the string "maple". It will then throw a reference error because it can't find it.
With the updated code the PHP will instead send the following.
filterSet("maple");
Since this is a string it will now work as expected.

Use a function as argument for the filter method :
function filterSet(optValue){
$("#mySelect option")
.filter(function () { return $(this).val() == optValue; })
.prop('selected',true)
}
filterSet('oak');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="mySelect">
<option value = 'all' selected> Ward </option>
<option value = 'maple'> Maple </option>
<option value = 'oak'> Oak </option>
<option value = 'w3'> Ward 3 </option>
<option value = 'w4'> Ward 4 </option>
<option value = 'w5'> Ward 5 </option>
<option value = 'w6'> Ward 6 </option>
</select>

recreate an array based on options selected

I need help solving a simple requirement.
<select id="my-select1">
<option value="1">This is option 1 ({myop1}|OP)</option>
<option value="2" selected>This is option 2 ({myop1}|OQ)</option>
<option value="3">This is option 3 ({myop1}|OR)</option>
</select>
<select id="my-select2">
<option value="1">This is option 1 ({myop2}|PP)</option>
<option value="2">This is option 2 ({myop2}|PQ)</option>
<option value="3" selected>This is option 3 ({myop2}|PR)</option>
</select>
<select id="my-select3">
<option value="1">This is option 1 ({myop3}|QP)</option>
<option value="2">This is option 2 ({myop3}|QQ)</option>
<option value="3" selected>This is option 3 ({myop3}|QR)</option>
</select>
See the HTML above, I want to recreate my array:
combo = ["abc-{myop1}-{myop2}", "def-{myop2}"];
INTO
combo = ["abc-OQ-PR", "def-PR"];
based on the selected options.
Another thing to note is that I cannot simply change the value of the options of the select box, meaning to say the HTML is somewhat as it is, if it would help, the only part i can restructure on that HTML is the text content between <option></option>
I'm not sure, but I'm already spending a couple of hrs just to solve this problem. Maybe due to my limited jQuery knowledge.
Please help. thanks

Get the selected values into an associative array:
var pattern = {};
var s = $('select option:selected').each(function(){
var m = /\((.*?)\|(.*)\)/.exec($(this).text());
pattern[m[1]] = m[2];
});
Then you can replace each place holder in each string in the array with the corresponding value:
combo = $.map(combo, function(e){
return e.replace(/\{.*?\}/g, function(m){
return pattern[m];
});
});
Demo: jsfiddle.net/C97ma/

Based on the information you provided I'm don't get it 100% I guess. But whatever you're trying to do, I guess jQuerys .map() and $.map() would help you here.
Like
var arr = $('select').find('option:selected').map(function(index, elem) {
return elem.textContent || elem.text;
}).get();
Demo: http://www.jsfiddle.net/4yUqL/78/
Within the callback you can modify/match the text in any way you want/need. In your case I could imagine you want to use a regular expression to match the selected strings and recreate those somehow.

I figure you're using javascript for combining those (it can be done with PHP also)..
You need references to your selects, e.g. :
<script type="text/javascript">
a=document.getElementById("myselect").options[1];
</script>
This will assign the 2nd option value from the 'myselect' select element to the variable 'a'

To begin with I would change the values in the select box like this:
<select id="my-select1">
<option value="OP">This is option 1 ({myop1}|OP)</option>
<option value="OQ" selected>This is option 2 ({myop1}|OQ)</option>
<option value="OR">This is option 3 ({myop1}|OR)</option>
</select>
<select id="my-select2">
<option value="PP">This is option 1 ({myop2}|PP)</option>
<option value="PQ">This is option 2 ({myop2}|PQ)</option>
<option value="PR" selected>This is option 3 ({myop2}|PR)</option>
</select>
<select id="my-select3">
<option value="QP">This is option 1 ({myop3}|QP)</option>
<option value="QQ">This is option 2 ({myop3}|QQ)</option>
<option value="QR" selected>This is option 3 ({myop3}|QR)</option>
</select>
Now to update your array:
var comboDef = ["abc-{myop1}-{myop2}", "def-{myop2}"];
var combo = ["abc-{myop1}-{myop2}", "def-{myop2}"];
function updateArray() {
combo = comboDef;
for (i in combo)
{
combo[i] = combo[i].replace("{myop1}",document.getElementById("my-select1").value);
combo[i] = combo[i].replace("{myop2}",document.getElementById("my-select2").value);
combo[i] = combo[i].replace("{myop3}",document.getElementById("my-select3").value);
}
}
Of course, this could be done better with proper arrays (if you gave your select boxes the same name you could iterate through them using document.getElementsByName()). The basic idea is the replace though which I trust is what you're looking for.