We Keep Coding

Php: modify attribute html tag

I have these html tags:
<select name="ct" id="ct">
<option value="-1">Tutte</option>
<option value="1">Da verificare</option>
<option value="2">Verificate</option>
<option value="3">Approvate</option>
<option value="4">Respinte</option>
<option value="5">Pubblicate</option>
<option value="6">Scadute</option>
<option value="7">Proposte</option>
<option value="8">Rifiutate</option>
<option value="9">Ritirate</option>
<option selected="selected" value="7,8,1">Proposte / Rifiutate / Da verificare</option>
</select>
I want to change the attribute value of the selected option (which contains "7,8,1") to value="-1", so it will look like:
<option selected="selected" value="-1">Proposte / Rifiutate / Da verificare</option>
I tried with:
$dom_richieste->getElementsByTagName('options')->getAttribute('value').value="-1";
But that's not working...

You can use $("#ct option[value='7,8,1']").val("-1");
$("#ct option[value='7,8,1']").val("-1");
console.log($("#ct").val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="ct" id="ct">
<option value="-1">Tutte</option>
<option value="1">Da verificare</option>
<option value="2">Verificate</option>
<option value="3">Approvate</option>
<option value="4">Respinte</option>
<option value="5">Pubblicate</option>
<option value="6">Scadute</option>
<option value="7">Proposte</option>
<option value="8">Rifiutate</option>
<option value="9">Ritirate</option>
<option selected="selected" value="7,8,1">Proposte / Rifiutate / Da verificare</option>
</select>
I suggest you to check how you created this drop down, and if possible replace there instead after creating drop down.

If I understand correctly you are need something like:
foreach ($dom->getElementsByTagName('option') as $item) {
if ($item->getAttribute('selected') == "selected")
$item->setAttribute("value", "-1");
}
This way you pass on your option items and set the value of the selected ones

You have used getElementsByTagName('options') in your code and no tag available with name options. Instead you should use correct tag name option.

Append all option text except first value

Is it possible to add text to the end of every option in a drop down except the first value [option value="0"] ?
<select name="DdlStockOptions" id="DdlStockOptions" class="stock-dropdown" _flx1_12_1="1" _flx1_13_1="1">
<option value="0">Make Your Selection</option>
<option value="127285">Pink</option>
<option value="127286">Yellow </option>
<option value="127287">Green </option>
<option value="127288">Purple </option>
</select>
I've used the following JS to append '- In Stock' to the end but it appears on every value including 'Make Your Selection' which I'm trying to avoid:
$("#DdlStockOptions option").append('- In Stock');

I would choose to mark the default option as disabled and selected (so it's selected by default) and then only append to elements that are not disabled, using the $(...).not() function:
$("#DdlStockOptions option").not("[disabled]").append(" - In Stock")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="DdlStockOptions" id="DdlStockOptions" class="stock-dropdown" _flx1_12_1="1" _flx1_13_1="1">
<option value="0" disabled selected>Make Your Selection</option>
<option value="127285">Pink</option>
<option value="127286">Yellow </option>
<option value="127287">Green </option>
<option value="127288">Purple </option>
</select>
If you don't want the default option to be disabled, you can also just use .not("[selected]") here:
$("#DdlStockOptions option").not("[selected]").append(" - In Stock")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="DdlStockOptions" id="DdlStockOptions" class="stock-dropdown" _flx1_12_1="1" _flx1_13_1="1">
<option value="0" selected>Make Your Selection</option>
<option value="127285">Pink</option>
<option value="127286">Yellow </option>
<option value="127287">Green </option>
<option value="127288">Purple </option>
</select>

$("#DdlStockOptions :not(:first-child)").append('- In Stock');
This will select everything except the first child as requested. It is using pseudo classes to exclude the first child of your selector, thus leaving all other options without having to add anything in your html.
I would strongly advice you to disable the first option thought, to avoid other problems and make sure to server side validate your code as well.

without changing your html, you can cycle on all options that have a value other than 0 and add what you want
$("#DdlStockOptions option").each(function()
{
if ($(this).val() != '0')
{
$(this).append('- In Stock');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="DdlStockOptions" id="DdlStockOptions" class="stock-dropdown" _flx1_12_1="1" _flx1_13_1="1">
<option value="0">Make Your Selection</option>
<option value="127285">Pink</option>
<option value="127286">Yellow </option>
<option value="127287">Green </option>
<option value="127288">Purple </option>
</select>
Demo:jsfiddle

With native javascript you can use document.querySelectorAll and target all option except first one using not selector
let x = document.querySelectorAll('#DdlStockOptions option:not([value="0"]');
x.forEach(function(item) {
item.innerHTML = item.innerHTML + '- In Stock'
})
<select name="DdlStockOptions" id="DdlStockOptions" class="stock-dropdown" _flx1_12_1="1" _flx1_13_1="1">
<option value="0">Make Your Selection</option>
<option value="127285">Pink</option>
<option value="127286">Yellow </option>
<option value="127287">Green </option>
<option value="127288">Purple </option>
</select>

Drop down changes automatically ( vise versa would be best )

I need to change the 3rd field automatically depending on first two field. ( it would be best if I change 3rd field and then first 2 fields changes also )
I need a Jquery solution. Anyone can help me please?
<select id="First">
<option val="car">car</option>
<option val="phone">phone</option>
</select>
<select id="Second">
<option val="car">car</option>
<option val="phone">phone</option>
<option val="boll">boll</option>
</select>
<hr>
<select id="ChangeItAutomatically">
<option val="carcar">car car</option>
<option val="carphone">car phone</option>
<option val="carboll">car boll</option>
<option val="phonecar">phone car</option>
<option val="phonephone">phone phone</option>
<option val="phonecarboll">phone boll</option>
</select>

Is this what you're looking for?
$(document).ready(function() {
// on change for the 3rd select
$("#ChangeItAutomatically").on("change", function() {
// get the value and split on space
var value = $(this).val().split(" ");
// select the other two selects based on the values
$("#First").val(value[0]);
$("#Second").val(value[1]);
});
// on change for the first two selects
$("#First, #Second").on("change", function() {
// set the value of the 3rd select based on the combination of values of the first two
$("#ChangeItAutomatically").val($("#First").val() + " " + $("#Second").val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="First">
<option val="car">car</option>
<option val="phone">phone</option>
</select>
<select id="Second">
<option val="car">car</option>
<option val="phone">phone</option>
<option val="boll">boll</option>
</select>
<hr>
<select id="ChangeItAutomatically">
<option val="car car">car car</option>
<option val="car phone">car phone</option>
<option val="car boll">car boll</option>
<option val="phone car">phone car</option>
<option val="phone phone">phone phone</option>
<option val="phone boll">phone boll</option>
</select>

Array of select field with same name and different id.

I have an array of select fields all having the same list of option value. What i am trying to get is, if a value is selected in any of the field, it should not show on the other. Below is an example code. For example, if I am having four select fields, if I select 'a' on first field, the value "a" should not appear on the next select field. Same with other values of "b", "c" and "d".
I am trying to use java script for the same. I am in learning phase. help will be really appreciated. Thanks
<select name='list' id='list_1'>
<option value='a'>a</option>
<option value='b'>b</option>
<option value='c'>c</option>
<option value='d'>d</option>
</select>
<select name='list' id='list_2'>
<option value='b'>b</option>
<option value='c'>c</option>
<option value='d'>d</option>
</select>
<select name='list' id='list_3'>
<option value='c'>c</option>
<option value='d'>d</option>
</select>
<select name='list' id='list_4'>
<option value='d'>d</option>
</select>

Try this code that i have written .. Hope should help
<select>
<option value="0"> </option>
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
<select>
<option value="0"> </option>
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
<select>
<option value="0"> </option>
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
$(document).on('change', 'select', function() {
$(this).find('option:selected').addClass('keepit');
$('option[value="' + this.value + '"]:not( .keepit)').remove();
});
https://jsfiddle.net/av46dbo1/

Since you don't want to destroy the data, you need to hide the options.
That's tricky because you have multiple state to combine.
you can make several IF comparisons, hard-code a table of combos for each group and options (yuck), or use a mountain of JS to solve this, but i think that CSS is better.
A simple way to accomplish this is to use CSS; multiple classes on a single element that translate your many states into rules that can be applied instantly and generically (without hard-coding ids or names).
<select name='list' id='list_1'>
<option value='a'>a</option> <option value='b'>b</option>
<option value='c'>c</option> <option value='d'>d</option>
</select>
<select name='list' id='list_2'>
<option value='a'>a</option> <option value='b'>b</option>
<option value='c'>c</option> <option value='d'>d</option>
</select>
<select name='list' id='list_3'>
<option value='a'>a</option> <option value='b'>b</option>
<option value='c'>c</option> <option value='d'>d</option>
</select>
<select name='list' id='list_4'>
<option value='a'>a</option> <option value='b'>b</option>
<option value='c'>c</option> <option value='d'>d</option>
</select>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script>
var combos=[], // store the css we need to define hide/show rules
classes= new Array($("select").length); //a place to store many states
$("select").each(function(i,e){ // for every drop down,
$(this).change(function(){ // when it changes:
classes[i]=this.value; // update array with changed value in right slot
document.body.className=classes.join(" "); // update body class with array
});
});
$("select option[value]").each(function(n, a){ // make css to hide each option if body has the same class:
combos.push( "body."+a.value+" option[value='"+a.value+"'] ");
});
//append the dynamic CSS to the head:
$("head").append("<style> "+combos+"{ display: none; }</style>");
</script>
online demo: http://pagedemos.com/pe2uf5vkx9vh/
if you want to restrict this functionality to certain drop downs, give them a class like <select class=hider and change $("select to $("select.hider in the code above.
if you have values with spaces, you'll need fancier CSS selectors than class, like data-state="|a b|hello world|honda crv|" attribs that you can delimit and hit with partial attribute selectors (body[data-state*='|hello world|']...), but the same pattern can work with many and more complex states.

Fiddle
$(function(){
$('#list_1').change(function(){
var valueToRemove=$(this).val();
$('select').not('#list_1').each(function(){
var currentId=$(this).prop('id');
$("#"+currentId+" option[value="+valueToRemove+"]").remove();
})
})
})

How can I move a select element's values & text to another select element

I want to get the <option> values and text from a <select> element #myselect, and add it to another <select> element #newselect. The value and text passed to the second select element, #newselect, must also be disabled. I'd like support for IE 8+.
<select id="myselect">
<option value="1">Red</option>
<option value="2">Orange</option>
<option value="3">Yellow</option>
</select>
Take the above, disable them and add them to the below:
<select id="newselect">
<option value="1">Green</option>
<option value="2">Blue</option>
<option disabled value="1">Red</option>
<option disabled value="2">Orange</option>
<option disabled value="3">Yellow</option>
</select>

Since you included the jQuery tag, here's a jQuery solution.
As long as you're using jQuery 1.x, IE8 support is included.
$('#myselect option').each(
function() {
$(this).prop('disabled', true).appendTo('#newselect');
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="myselect">
<option value="1">Red</option>
<option value="2">Orange</option>
<option value="3">Yellow</option>
</select>
<select id="newselect">
<option value="1">Green</option>
<option value="2">Blue</option>
</select>

You already have jQuery answer. So now if you are curious how it can be in pure javascript, here it is. As you can see, it's a little more verbose of course:
var mySelect = document.getElementById('myselect'),
newSelect = document.getElementById('newselect');
while (mySelect.options.length) {
mySelect.options[0].disabled = true;
newSelect.add(mySelect.options[0]);
}
<select id="myselect">
<option value="1">Red</option>
<option value="2">Orange</option>
<option value="3">Yellow</option>
</select>
<select id="newselect">
<option value="1">Green</option>
<option value="2">Blue</option>
</select>