Two select options in different table cells don't work - html

So I have these <select><option>s which I put in two different table cells and no matter what the second one doesn't work the way it should. It kinda shows up as the select object on the page but I can't proceed any further actions (choose any option from the dropdown).
Code:
<table>
<tr>
//... other cells
<form action="./users.php" method="POST">
<td class="sex">
<select name="sex">
<option value="m">Male</option>
<option value="f">Female</option>
<option value="o">Other</option>
</select>
</td>
<td class="language">
<select name="language">
<option value="french">French</option>
<option value="german">German</option>
</select>
</td>
</form>
</tr>
</table>

Related

How can I put an <input type="text" in a multiple <select>?

I´m using the code below to get an input textfield next to each option in a multiple select, but what I get is a total mess. The first option is in the multiple select but the rest shows out of the select list.
Does somebody knows how can I make that? I´m sorry I can not post images.
I hope somebody can help.
Thanks.
<select name="cars" multiple>
<option value="audi">Audi</option>
<input type="text" name="Audi" value""/>
<option value="bmv">BMV</option>
<input type="text" name="BMV" value""/>
<option value="honda">Honda</option>
<input type="text" name="honda" value""/>
<option value="peugueot">Peugueot</option>
<input type="text" name="peugueot" value""/>
<option value="volkswagen">Volkswagen</option>
<input type="text" name="volkswagen" value""/>
<option value="opel">Opel</option>
<input type="text" name="opel" value""/>
</select>
Do your drop down list but put a generic textbox afterwards. On the submit action, get the value of the count and apply it to the selected value.
<select name="cars" multiple>
<option value="audi">Audi</option>
<option value="bmv">BMV</option>
<option value="honda">Honda</option>
<option value="peugueot">Peugueot</option>
<option value="volkswagen">Volkswagen</option>
<option value="opel">Opel</option>
</select>
<input type="text" name="Count" value""/>
That only allows 1 count per save. If you want to be able to submit counts for ALL models, use a label and an input for each kind: like so
<table>
<tr>
<td>
Audi
</td>
<td>
<input type="text" name="audi" value""/>
</td>
</tr>
<option value="bmv">BMV</option>
<tr>
<td>
BWV
</td>
<td>
<input type="text" name="bmw" value""/>
</td>
</tr>
</table>

Table td tr html label select (trying to parent/link drop down options inside two drop down tabs)

I have got these two drop down tabs/options and I was hoping someone could help me fix my little problem. I am trying to select an option inside category and then only be able to select options related inside the subcategory instead of been able to select everything. Trying to parent the options related to each other to be displayed basically..
<tr>
<td align="right">Category</td>
<td><label>
<select name="category" id="category">
<option value="" selected="selected"></option>
<option value="Clothing">Clothing</option>
<option value="Headwear">Headwear</option>
</select>
</label></td>
</tr>
<tr>
<td align="right">Subcategory</td>
<td>
<select name="subcategory" id="subcategory">
<option value="" selected="selected"></option>
<option value="beanie">beanie</option>
<option value="Cap">cap</option>
<option value="Shirts">Shirt</option>
</select>
</td>
</tr>
If you are using jquery try this, jsFiddle Example
$('#category').change(function(event){
var subcategory = $(this).closest('tr').next().find('#subcategory');
var selectedCat = $(this).val();
if(selectedCat != false) {
$(subcategory).prop('disabled', false).val(0);;
$(subcategory).find("[data-target='" + selectedCat + "']").show()
$(subcategory).find("[data-target!='" + selectedCat + "']").hide()
} else {
$(subcategory).prop('disabled', true).val(0);
}
});
Also, disable the subcategory and add data-target="category-name"
<select name="subcategory" id="subcategory" disabled="true">
<option value="" selected="selected"></option>
<option value="beanie" data-target="headwear">beanie</option>
<option value="cap" data-target="headwear">cap</option>
<option value="shirts" data-target="clothing">Shirt</option>
</select>

Select option is selecting the same value

I have a select option in the table, When i am selecting yes in html file, then it is selecting No value and If i am selecting No then also selecting No value, dont understand why this is happening. please help.
<tr>
<td> 24x7</td>
<td>
<select name="select10" id="Fvalue">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
</td>
<td>
<input type="text" id="Gvalue" />
</td>
</tr>

select tag in HTML

I am trying to achieve following using following code
<tr>
<td width="2%"/>
<td>[mc "Always Make List"]</td>
<td>
<select id="AML" NAME="ALWAYS_MAKE_LIST" style="margin-left:10px;" onchange="OnChange()">
<option value="Y">Y</option>
<option value="N">N</option>
</select>
</td>
</tr>
I am getting extra space in the dropdown list. I need to set default value of first element in dropdown to "Y"
Change the Y option line to <option value="Y" selected="selected">Y</option>
Set selected="selected" for the default option.
<option value="Y" selected="selected">Y</option>

2 combobox working together

I have two comboboxes:
Enable monitoring: Yes/No
and
Operation mode: Client/Server
The default value of the first one is 'No' and the second should be hidden. When I change it to Yes, I want the second combobox to be visible. How can I do that?
<tr>
<td width="25%" class="titulos" nowrap>Enable monitoring:</td>
<td width="75%" class="dados" nowrap>
<select class="dados" name="proxyconf" onchange="showOptions ();">
<option value="1" selected>No</option>
<option value="2" >Yes</option>
</select>
</td>
</tr>
<tr>
<td width="25%" class="titulos" nowrap>Operation Mode:</td>
<td width="75%" class="dados" nowrap>
<select class="dados" name="proxyconf" onchange="showOptions ();">
<option value="1" selected>No</option>
<option value="2" >Yes</option>
</select>
</td>
</tr>
You can do that with Javascript.
Give the second option box an ID, and then use Javascript to show/hide it:
<script type="text/javascript">
function showOptions() {
var elem = document.getElementById("id_of_second_box");
elem.style.display = "block";
}
</script>
You can pass in the option box to the function by reference if you like, and there are many different ways of showing/hiding elements using Javascript and CSS, but something along the lines of the above should help.
I would do it this way: http://jsfiddle.net/qtHc3/ (the example uses jQuery).
Using JavaScript:
function showOptions(elem){
if(elem.value == "2"){
document.getElementById("second").style.visibility = "visible";
}else{
document.getElementById("second").style.visibility = "hidden";
}
}
And the first combobox:
<select class="dados" name="proxyconf" onchange="showOptions(this);" id="first">
<option value="1" selected>No</option>
<option value="2" >Yes</option>
</select>
And the second one:
<select class="dados" name="proxyconf" onchange="" id="second" style="visibility:hidden">
<option value="1" selected>No</option>
<option value="2" >Yes</option>
</select>
But this may not be cross browser compatible so check carefully.