我需要修改一个用Codeigniter编写的网站,但我不是专家。
我想做的一件事是修改表单中的选择控件以使用ms-dropdown作为包含图片的下拉列表。
但是,我无法弄清楚如何在每个选项中制作除ID和值之外的Codeigniter表单助手渲染参数。在这种情况下,要使ms-dropdown工作,还需要在每个选项中呈现 data-image =“...”。
目前的代码如下:
$dropdown = array(
'name'=>'MyDropDown',
'options' => array('Op1'=>'First Option', 'Op2' =>'Second Option')
);
echo form_dropdown($dropdown['name'],$dropdown['options']);
这呈现为
<select name="MyDropDown">
<option value='Op1'>First Option</option>
<option value='Op2'>Second Option</option>
</select>
我有没有办法让Codeigniter渲染
<select name="MyDropDown">
<option value='Op1' data-image="filepath1">First Option</option>
<option value='Op2' data-image="filepath2">Second Option</option>
</select>
答案 0 :(得分:1)
你做不到。您需要扩展CI的表单助手并进行修改 form_dropdown接受ID的其他属性
你必须扩展帮助者。
扩展本机Form Helper,您将创建一个名为的文件 application / helpers / MY_form_helper.php ,并添加或覆盖 功能:
如果您要覆盖function form_dropdown
只需在MY_form_helper.php
这是基本功能
if ( ! function_exists('form_dropdown'))
{
function form_dropdown($name = '', $options = array(), $selected = array(), $extra = '')
{
if ( ! is_array($selected))
{
$selected = array($selected);
}
// If no selected state was submitted we will attempt to set it automatically
if (count($selected) === 0)
{
// If the form name appears in the $_POST array we have a winner!
if (isset($_POST[$name]))
{
$selected = array($_POST[$name]);
}
}
if ($extra != '') $extra = ' '.$extra;
$multiple = (count($selected) > 1 && strpos($extra, 'multiple') === FALSE) ? ' multiple="multiple"' : '';
$form = '<select name="'.$name.'"'.$extra.$multiple.">\n";
foreach ($options as $key => $val)
{
$key = (string) $key;
if (is_array($val) && ! empty($val))
{
$form .= '<optgroup label="'.$key.'">'."\n";
foreach ($val as $optgroup_key => $optgroup_val)
{
$sel = (in_array($optgroup_key, $selected)) ? ' selected="selected"' : '';
$form .= '<option value="'.$optgroup_key.'"'.$sel.'>'.(string) $optgroup_val."</option>\n";
}
$form .= '</optgroup>'."\n";
}
else
{
$sel = (in_array($key, $selected)) ? ' selected="selected"' : '';
$form .= '<option value="'.$key.'"'.$sel.'>'.(string) $val."</option>\n";
}
}
$form .= '</select>';
return $form;
}
}
你必须编辑这部分,
foreach ($options as $key => $val)
{
$key = (string) $key;
if (is_array($val) && ! empty($val))
{
$form .= '<optgroup label="'.$key.'">'."\n";
foreach ($val as $optgroup_key => $optgroup_val)
{
$sel = (in_array($optgroup_key, $selected)) ? ' selected="selected"' : '';
$form .= '<option value="'.$optgroup_key.'"'.$sel.'>'.(string) $optgroup_val."</option>\n";
}
$form .= '</optgroup>'."\n";
}
else
{
$sel = (in_array($key, $selected)) ? ' selected="selected"' : '';
$form .= '<option value="'.$key.'"'.$sel.'>'.(string) $val."</option>\n";
}
}
如您所见,该功能只设置了选项的值属性,您可以编辑此代码和 做你想做的事,
试试吧,如果你不能这样做,告诉我我会帮助你,但先试试看:)答案 1 :(得分:0)
考虑做这样的事情:
<script type="text/javascript">
var filepath = <?=json_encode($dropdown['filepath'])?>;
</script>
$dropdown['filepath']
将使用选项值作为键并将文件路径存储为值。然后,您只需在filepath[$(this).val()]
活动时访问change
。
<script type="text/javascript">
var filepath = { 'Op1' : 'filepath1', 'Op2' : 'filepath2' };
$('select').bind('change', function() {
console.log(filepath[$(this).val()]);
});
</script>
尽管我喜欢使用data-
属性,但我们不能忘记其他方法来实现目标。
答案 2 :(得分:0)
如果它对任何人有帮助,我找到了使用JQuery的解决方法。
我创建了一个javascript函数,在页面准备好后将 data-image 属性应用于每个选项字段,然后调用msDropdown函数。
function PiccifyShowDropdown(){
var Diagrams = new Array(
"/assets/images/icons/SixtyToHundredPercent.png",
"/assets/images/icons/LessThanThirtyPercent.png",
"/assets/images/icons/ThirtyToSixtyPercent.png",
"/assets/images/icons/SixtyToHundredPercent.png"
);
$("#Show > option").each(
function() {
$(this).attr("data-image",Diagrams[this.index]);
}
);
$("#Show").msDropdown({visibleRows:2});
}
这似乎有效,所以现在我只需要有人解决与this guy相同的问题......