Issue
I have this code :
<ul class="quick-contact">
<li class="phone"><strong>Sales: </strong>0987 989898</li>
<li class="email"><strong>Email: </strong><a href="#" title="Sample link">info@yourdomain.com</a></li>
<li class="sites"><strong>Sites: </strong><select class="inputbox"><option>USA</option><option>UK</option><option>France</option><option>Japan</option><option>South Africa</option></select></li>
</ul>
I want sales number change with each options selected. If someone has any ideas I really appreciate all answers
Solution
You will need to make use of Javascript to achieve this functionality.
Working Snippet:
// comments inline
var salesNumbers = { // store all phone numbers in an object here
'USA': '123 123', // you can easily add/remove/modify the country/numbers here
'UK': '456 456',
'France': '789 789',
'Japan': '111 222',
'South Africa': '333 444'
}
function updateSalesNumber(){ // this will be called when dropdown value will be changed
var inputBox = document.getElementById("inputbox");
// get the selected option
var selectedOption = inputBox.options[inputBox.selectedIndex].value;
// update the number on the webpage
document.getElementById("sales-number").innerHTML = salesNumbers[selectedOption];
}
<ul class="quick-contact">
<li class="phone"><strong>Sales: </strong><span id="sales-number">0987 989898</span></li>
<li class="email"><strong>Email: </strong><a href="#" title="Sample link">info@yourdomain.com</a></li>
<li class="sites"><strong>Sites: </strong>
<select id="inputbox" onchange="updateSalesNumber()">
<option value="USA">USA</option>
<option value="USA">UK</option>
<option value="France">France</option>
<option value="Japan">Japan</option>
<option value="South Africa">South Africa</option>
</select>
</li>
</ul>
Answered By - Rahul Desai
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.