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.

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 to use option from a drop down list many times

i wonder if there's a way to use option from select tag for many drop down list. My html looks like :
<div id="backGround0"></div>
<div id="dropspot0"></div>
<p class="ziua0">LUNI<br/>
<select id="zile0">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select id="luniAn0">
<option value="Ianuarie">Ianuarie</option>
<option value="Februarie">Februarie</option>
<option value="Martie">Martie</option>
<option value="Aprilie">Aprilie</option>
<option value="Mai">Mai</option>
<option value="Iunie">Iunie</option>
<option value="Iulie">Iulie</option>
<option value="August">August</option>
<option value="Septembrie">Septembrie</option>
<option value="Octombrie">Octombrie</option>
<option value="Noiembrie">Noiembrie</option>
<option value="Decembrie">Decembrie</option>
</select>
</p>
And i want to add exactly the same values from above into these select tags:
<div id="backGround1"></div>
<div id="dropspot1"></div>
<p class="ziua1">MARTI<br/>
<select id="zile1">
</select>
<select id="luniAn1">
</select>
</p>
I have tried like this:
function dropDownLists(){
var zileOptions = $.map($('#zile0 option'), function(e) { return e.value; });
var luniAnOptions = $.map($('#luniAn option'), function(e) { return e.value; });
for(var i = 1; i < 7; i++){
zileToAdd = document.getElementById("zile" + i);
luniToAdd = document.getElementById("luniAn" + i);
zileToAdd.append("<option>" + zileOptions + "</option>");
luniToAdd .append("<option>" + luniAnOptions + "</option>");
}
}
Where i tried to take value of first select tag and add in another. But,i couldnt get option value,name or something else for Months...and neither
zileToAdd.append("<option>" + zileOptions + "</option>");
doesnt work :( That for shall add these two drop down lists 6 more times for select tags like id="zile" + i (for days) and id="luniAn" + i for second drop down list (months).

You can try html() function
$('#zile1').html($('#zile0').html());
$('#luniAn1').html($('#luniAn0').html());
Please check this demo

demo: http://jsfiddle.net/8LcVv/
var zile0 = $('#zile0').html();
$('#zile1').html(zile0);
var luniAn0 = $('#luniAn0').html();
$('#luniAn1').html(luniAn0);

you can also use html-defining javascript-variables:
var options = '<option value="01">01</option>' +
'<option value="02">02</option>' +
'<option value="03">03</option>';
$('#zile1').append(options);
$('#luniAn1').append(options);
something like this should work also.

you can add the select block in one file; And include them where ever needed. This link may help you.
Include same header and footer in multiple html files
The benefit of using this technique is it allows you add same code in different pages.

Alarm Clock with 'German Time' Option - in JavaScript

Paul here. I'm new to JavaScript and trying to build an alarm clock similar to that described in this question:
Why does my alarmclock script stop working?
Working demo from Whakkee: http://www.obviousmatter.com/testso/hours2.html
However I would like to use dropdown select instead of text input.
(my demo of what I mean by 'dropdown select', this is not a working example)
http://paulodonovan.net/Experiments/JavaScript/rise-and-shine/rise-and-shine_0.2.html
For an experiment I tried substituting 'text input' with 'select with options' but I don't know how to integrate the select:
<html>
<body>
<div>
<form name="frm">
<select name="hour">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
</select>
<select name="mins">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
</select>
<input type="button" value="Set Alarm" onclick="justonce=1;">
</form>
<font color=#660000 size=20 face=Tahoma><span id="hours"></span></font>
</div>
</body>
</html>
<script type="text/javascript">
obj_hours=document.getElementById("hours");
justonce=0;
function wr_hours()
{
time=new Date();
time_min=time.getMinutes();
time_hours=time.getHours();
time_wr=((time_hours<10)?"0":"")+time_hours;
time_wr+=":";
time_wr+=((time_min<10)?"0":"")+time_min;
obj_hours.innerHTML=time_wr;
if (justonce==1 && frm.mins.value==time_min && frm.hour.value==time_hours) {
alert('Hello. Rise and Shine. :-)');
justonce=0;
}
}
setInterval("wr_hours();",1000);
</script>
That doesn't work, any thoughts why? Perhaps I need to use index?
I was hoping to personalize this project a bit and also add some other features, e.g.
Select a Youtube Video to play as alert, from a list of 10 songs and by pasting a url. I found a similar example in terms of features, but the code is very complex to my eyes..: http://onlineclock.net/video/
'German time mode' checkbox: '(everything is 10min earlier so you'll never be late.)'
If time permits:
- Checkbox to 'Vintage Style' switching on an alternative CSS style sheet. That could include an analogue alarm clock I can built in CSS.
Of course I would rather understand and will write from scratch, I don't expect anyone to build it for me but any pointers to relevant tutorials or techniques etc. would be much appreciated.
Thanks, Paul

This question seems to me, to be
Part 1
How can I get the chosen value from a <select>?
The easiest way is to give the <select> an id attribute, for example
<select id="foobar">
<option value="00">00</option>
<option value="01">01</option>
</select>
Now, in your JavaScript, you can access the chosen value using the following code
document.getElementById('foobar').value;
Remember that an id must be unique for the whole page.
Part 2
How can I subtract 10 minutes from the time?
The current code you're using doesn't use a Date object for user's selection nor use Number s, it uses String s (as <option> values). This means that to subtract 10 minutes you'll have to use one (or do something excessively complicated). As you're not using Date in this, I'll avoid it in my answer (though you might want to consider learning about it anyway).
To do what you want you'll need to add a couple more steps. In the following, form_min and form_hours are the user's selected times.
Step 1. Convert minutes and hours to Number.
form_min = parseInt(form_min, 10);
form_hours = parseInt(form_hours, 10);
Step 2. Subtract 10 minutes
form_min = form_min - 10;
Step 3. If minutes are negative, subtract 1 hour and add 60 minutes.
if (form_min < 0) {
form_hours = form_hours - 1;
form_min = form_min + 60;
}
Step 4. Convert back to String.
form_min = (form_min < 10 ? "0" : "") + form_min;
form_hours = (form_hours < 10 ? "0" : "") + form_hours;
If you work with .selectedIndex (60 options starting from 0 for minutes, etc) you can skip Step 1 as you will have the value as a Number due to the fact the option value matches the option's index in this context.

Add id attribute to: <select id="hours" name="hours">
This is how you need to get the value from the hours drop down:
var hourField = document.getElementById("hours");
var obj_hours = hourField.options[hourField.selectedIndex].value;
You may need to do the same in your mins dropdown box too.

Show/Hide Field Based on Option Value in Select Box

I am trying to use a slightly modified version of this code to show/hide the field Return Time on this page based on Type of Trip:
One Way: Return Time is hidden
Round Trip: Return Time is shown
Here is the Select Box html. Code is autogenerated by cforms on wordpress.
<select name="TripType" id="TripType" class="cformselect" >
<option value="One Way">One Way</option>
<option value="Round Trip">Round Trip</option>
</select>
And here is the form element I'm trying to hide:
<li id="li--8" class=""><label id="label--8" for="DepartLeg2-Time"><span>Return Time</span></label><select name="DepartLeg2-Time" id="DepartLeg2-Time" class="cformselect" >
<option value="12:00am">12:00am</option>
<option value="12:30am">12:30am</option>
<option value="1:00am">1:00am</option>
<option value="1:30am">1:30am</option>
<option value="2:00am">2:00am</option>
<option value="2:30am">2:30am</option>
<option value="3:00am">3:00am</option>
<option value="3:30am">3:30am</option>
<option value="4:00am">4:00am</option>
<option value="4:30am">4:30am</option>
<option value="5:00am">5:00am</option>
<option value="5:30am">5:30am</option>
<option value="6:00am">6:00am</option>
<option value="6:30am">6:30am</option>
<option value="7:00am">7:00am</option>
<option value="7:30am">7:30am</option>
<option value="8:00am">8:00am</option>
<option value="8:30am">8:30am</option>
<option value="9:00am">9:00am</option>
<option value="9:30am">9:30am</option>
<option value="10:00am">10:00am</option>
<option value="10:30am">10:30am</option>
<option value="11:00am">11:00am</option>
<option value="11:30am">11:30am</option>
<option value="12:00pm">12:00pm</option>
<option value="12:30pm">12:30pm</option>
<option value="1:00pm">1:00pm</option>
<option value="1:30pm">1:30pm</option>
<option value="2:00pm">2:00pm</option>
<option value="2:30pm">2:30pm</option>
<option value="3:00pm">3:00pm</option>
<option value="3:30pm">3:30pm</option>
<option value="4:00pm">4:00pm</option>
<option value="4:30pm">4:30pm</option>
<option value="5:00pm">5:00pm</option>
<option value="5:30pm">5:30pm</option>
<option value="6:00pm">6:00pm</option>
<option value="6:30pm">6:30pm</option>
<option value="7:00pm">7:00pm</option>
<option value="7:30pm">7:30pm</option>
<option value="8:00pm">8:00pm</option>
<option value="8:30pm">8:30pm</option>
<option value="9:00pm">9:00pm</option>
<option value="9:30pm">9:30pm</option>
<option value="10:00pm">10:00pm</option>
<option value="10:30pm">10:30pm</option>
<option value="11:00pm">11:00pm</option>
<option value="11:30pm">11:30pm</option>
</select></li>
Here is the javascript I'm using:
$("#TripType").change(function() {
$("#li--8")[$(this).val() == "Round Trip" ? 'show' : 'hide']("fast");
}).change();
I have the code working here on JSFiddle: http://jsfiddle.net/MS4Ck/. However, it is not working on the site. My console is not giving me any errors except for a reference error coming from some logging code I put in there to make sure the javascript is being called (it is). Any ideas? Thank you so much!

Just a guess, but make sure this function is wrapped in a docReady function eg:
$(document).ready(function() {
$("#TripType").change(function() {
$("#li--8")[$(this).val() == "Round Trip" ? 'show' : 'hide']("fast");
}).change();
});