单击事件和选项值 [英] Click Event and option value
问题描述
在这里，我有两个问题，一个是在加载所有列表框时要隐藏，这取决于单选按钮列表框是否必须显示/隐藏列表框，但它在这里不起作用，另外一个是我必须检查列表框选项值是否包含空值或空的空间，如果意味着我必须将其删除.那太行不通了，代码中的任何错误都可能对此有所帮助.
Here i come with two question one is on onload all listbox to be hide depend of radio button listbox had to show/hide listbox but its not working here and other one is i have to check if listbox option value contain null value or empty space if means i have to remove it. thats too not working there any mistake in code could some one help on this .
<script>
if ($('input[name=B]:checked').val() == "city") {
$("#country,#zone,#state,#Areamanager,#outlet").val('');
$("#country_value,#zone_value,#state_value,#Areamanager_value,#outlet_value").val('');
$("#city").show();
$("#country,#zone,#state,#Areamanager,#outlet").hide();
}
$.each(main, function (i, val) {
if (val == "Null Value" || val == "") {
val = null;
}
});
</script>
推荐答案
看看提供的小提琴
提琴手 http://jsfiddle.net/Varinder/tHXN3/1 /
它被认为是不良做法.
通常，如果您发现逻辑重复了三遍以上，则可以很好地重构.
Usualy it is a good indication to refactor if you notice the logic being repeated more than three times.
如果我错了，请纠正我，您的要求是:
Correct me if im wrong, you're requirements are:
- 根据所选的单选按钮显示一堆或相关字段
- 重置所有与当前活动的单选按钮不相关的字段
- 页面加载会去除所有具有"Null值"或只是一个空字符串的选择框选项.
当通过jQuery遍历HTML时，在HTML方面进行一些重构会大有帮助:
A little bit of refactoring on HTML side of things can go a long way when traversing it via jQuery:
在这里，我认为该结构将满足您的要求(有关更多内容，请参见下一节).而且，我仅通过处理单选按钮的第一行对其进行了一些简化:
Heres the structure i reckon will suit your requirement ( more on this further down ). And i've simplified it a bit by only working on the first radio button row:
<table cellpadding="0" cellspacing="0" border="2">
<tr>
<td><input type="radio" name="A" data-dependson=".maingroup-section"/></td>
<td><font size="2">Main Group</font></td>
<td><input type="radio" name="A" data-dependson=".subgroup-section"/></td>
<td><font size="2">Sub Group</font></td>
<td><input type="radio" name="A" data-dependson=".itemname-section" /></td>
<td><font size="2">Item Name</font></td>
</tr>
</table>
<div class="form-row">
<div class="maingroup-section">
field values related to main group:<br />
<select id="maingroup">
<option value="Null Value">Null Value</option>
<option value="1">AA</option>
<option value="2">BB</option>
<option value="3">CC</option>
<option value="Null Value">Null Value</option>
</select>
<input type="hidden" id="maingroup_value" />
</div>
<div class="subgroup-section">
field values related subgroup:<br />
<select id="subgroup">
<option value="Null Value">Null Value</option>
<option value="1">DD</option>
<option value="2">EE</option>
<option value="3">FF</option>
<option value="Null Value">Null Value</option>
</select>
<input type="hidden" id="subgroup_value" />
</div>
<div class="itemname-section">
field values related to itemname:<br />
<select id="itemname">
<option value="Null Value">Null Value</option>
<option value="1">GG</option>
<option value="2">HH</option>
<option value="3">II</option>
<option value="Null Value">Null Value</option>
</select>
<input type="hidden" id="itemname_value" />
</div>
</div>
首先，您会注意到data-attributes的使用，在这种情况下，它的data-dependson包含类名div并包含相关字段
First things first, you'll notice the use of data-attributes in this case its data-dependson which contains class name of div containing dependant fields
JS
首先缓存对将(滥用)所有元素的引用:
Start off by caching references to all the elements that will be (ab)used:
var $aGroupRadioButtons = $("input[name='A']");
var $formRow = $(".form-row");
var $allDropdowns = $formRow.find("select");
处理FormSections(.maingroup-section，.subgroup-section等)可以通过下面的函数来抽象，它引用当前活动的formsection，并隐藏并重置同级formsection的值.
Handling FormSections ( .maingroup-section, .subgroup-section etc ) can be abstracted away in a function like below, it takes reference to currently active formsection and hides and resets the value of sibling form sections.
function handleFormSections( $formSection ) {
var $currentFormSection = $formSection.show();
var $otherFormSections = $currentFormSection.siblings().hide();
resetFormSections( $otherFormSections );
}
和resetFormSections函数重置参数提供的表单部分的input和select元素
And resetFormSections function resets input and select elements of the form sections provided by the argument
function resetFormSections( $formSections ) {
$formSections.find("select").val("");
$formSections.find("input").val("")
}
好吧，以上两个功能足以显示依赖的表格部分，隐藏并重置其他表格部分.
Well, the above two functions are good enough to show dependant form section, hide and reset other form sections.
现在您可以通过事件处理程序连接这些函数，即时消息使用jQuery 1.8，因此我可以使用$(selector).on("event", handler)语法.
Now you can hook up those functions via event handlers, im using jQuery 1.8 so i can use $(selector).on("event", handler) syntax.
$aGroupRadioButtons.on("click", function(e) {
var $radioItem = $( this );
var dependantSectionName = $radioItem.attr("data-dependson");
var $dependantSectionElement = $( dependantSectionName );
handleFormSections( $dependantSectionElement )
});
从上面的代码开始，它查看data-dependson值以标识要显示的表单部分和要隐藏的表单部分.
As from the code above, its looking at the data-dependson value to identify which form section to show and which ones to hide.
沿着这条线的某个地方，您想去除空值或null值.同样，我们如何创建一个函数来为我们处理呢?也许将其称为removeNullOrEmptyOptionsFrom( selectBox )，它将接收一个selectBox元素进行工作，方法如下:
And somewhere along the line you'd want to strip off empty or null values. Again, how about we create a function to handle that for us? and maybe call it removeNullOrEmptyOptionsFrom( selectBox ) which will recieve a selectBox element to work on, heres how:
function removeNullOrEmptyOptionsFrom( selectBox ) {
var $selectBoxOptions = $(selectBox).children();
$selectBoxOptions.each(function() {
var $option = $(this);
var optionValue = $option.attr("value");
if ( optionValue == "Null Value" || optionValue == "" ) {
$option.remove();
}
});
}
现在，您可以在.form-row容器中的每个选择框上调用上述函数，如下所示:
Now, you can call the above function on every select box in the .form-row container like below:
$allDropdowns.each(function() {
removeNullOrEmptyOptionsFrom( this );
});
我注意到您的代码中有一个对combobox方法的调用，如果它是一个jQuery插件，那么在我们去除所有null或空选项之后，调用它可能是一个好主意:
I noticed in your code there is a call to combobox method, if it is a jQuery plugin then probably a good idea to call it after we've stripped off all the null or empty options:
// $allDropdowns.combobox(); // initialize combox once maybe after reseting selects?
这篇关于单击事件和选项值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
