html下拉列表初始默认值怎么设,如何设置HTML <select>元素的默认值?

回答(21)

e15298c6a3b4591803e154ab0c3b3e2e.png

2 years ago

您可以使用:

Some Value

代替,

Some Value

两者都同样正确 .

e15298c6a3b4591803e154ab0c3b3e2e.png

2 years ago

这就是我做的...

if ( $_POST['drop_down'] == "")

{

$selected = "";

}

else

{

$selected = "selected";

}

?>

>One

OR

Two

e15298c6a3b4591803e154ab0c3b3e2e.png

2 years ago

完整的例子:

1

2

3

4

5

e15298c6a3b4591803e154ab0c3b3e2e.png

2 years ago

您只需将属性“选中”放在特定选项上,而不是直接选择元素 .

以下是具有不同值的相同和多个工作示例的代码段 .

Select Option 3 :-

1

2

3

4

5

Select Option 5 :-

1

2

3

4

5

Select Option 2 :-

1

2

3

4

5

e15298c6a3b4591803e154ab0c3b3e2e.png

2 years ago

如果您希望将默认文本作为一种占位符/提示但不被视为有效值(例如“完成此处”,“选择您的国家”ecc . ),您可以执行以下操作:

Choose here

One

Two

Three

Four

Five

e15298c6a3b4591803e154ab0c3b3e2e.png

2 years ago

selected 属性是布尔属性 .

如果存在,它指定在页面加载时应预先选择一个选项 .

预选选项将首先显示在下拉列表中 .

Volvo

Saab

VW

Audi

e15298c6a3b4591803e154ab0c3b3e2e.png

2 years ago

如果你想使用Form中的值并保持动态,请尝试使用php

$selected = $_POST['select'];

?>

>1

>2

e15298c6a3b4591803e154ab0c3b3e2e.png

2 years ago

标签的value属性缺失,因此它不会显示为所需的选择 . 默认情况下,第一个选项显示在下拉页面加载,如果在标签上设置了value属性....我以这种方式解决了我的问题

e15298c6a3b4591803e154ab0c3b3e2e.png

2 years ago

如果你有反应,你可以在select标签中使用 defaultValue 作为属性而不是 value .

e15298c6a3b4591803e154ab0c3b3e2e.png

2 years ago

我只是简单地将第一个选择选项值设为默认值,然后使用HTML5的新“隐藏”功能隐藏该下拉列表中的值 . 像这样:

Select An Option

One

Two

Three

Four

e15298c6a3b4591803e154ab0c3b3e2e.png

2 years ago

我更喜欢这个:

Choose here

One

Two

Three

Four

Five

选择选项后,“选择此处”将消失 .

e15298c6a3b4591803e154ab0c3b3e2e.png

2 years ago

的问题是,当前正在呈现's sometimes disconnected with the state of what',除非选项列表中的内容发生了变化,否则不会返回更改值 . 尝试从列表中选择第一个选项时,这可能是一个问题 . 下面的代码可以在第一次选择时获得第一个选项,但是 οnchange="changeFontSize(this)" 自己不会 . 上面描述的方法使用虚拟选项来强制用户进行更改值以拾取实际的第一值,例如以空值开始列表 . 注意:onclick会调用该函数两次,下面的代码没有,但解决了第一次出现的问题 .

Font Size

Small

Medium

Large

Extra large

function changeFontSize(x){

body=document.getElementById('body');

if (x.value=="extraLarge") {

body.style.fontSize="25px";

} else {

body.style.fontSize=x.value;

}

}

e15298c6a3b4591803e154ab0c3b3e2e.png

2 years ago

改进nobita 's answer. Also you can improve the visual view of the drop down list, by hiding the element '在这里选择' .

Choose here

One

Two

Three

Four

Five

e15298c6a3b4591803e154ab0c3b3e2e.png

2 years ago

另一个例子;使用JavaScript设置选定的选项 .

(您可以使用此示例将值数组循环到下拉组件中)

// Get the select element

var select = document.getElementById("yourDropDownElementId");

// Create a new option element

var el = document.createElement("option");

// Add our value to the option

el.textContent = "Example Value";

el.value = "Example Value";

// Set the option to selected

el.selected = true;

// Add the new option element to the select element

select.appendChild(el);

e15298c6a3b4591803e154ab0c3b3e2e.png

2 years ago

你可以这样做:

1

2

3

4

5

在选项标记内提供“selected”关键字,您希望在下拉列表中默认显示该关键字 .

或者你也可以为选项标签提供属性,即

3

e15298c6a3b4591803e154ab0c3b3e2e.png

2 years ago

此代码使用PHP设置HTML select元素的默认值 .

$default = 3;

$nr = 1;

while($nr < 10){

if($nr == $default){

echo "". $nr ."";

}

else{

echo "". $nr ."";

}

$nr++;

}

?>

e15298c6a3b4591803e154ab0c3b3e2e.png

2 years ago

我遇到了这个问题,但是接受和高度赞同的答案对我来说并不适用 . 事实证明,如果您使用React,则设置 selected 不起作用 .

相反,您必须直接在 标记中设置一个值,如下所示:

Apple

Banana

Cranberry

e15298c6a3b4591803e154ab0c3b3e2e.png

2 years ago

我自己用它

ccc

xxx

zzz

aaa

qqq

wwww

e15298c6a3b4591803e154ab0c3b3e2e.png

2 years ago

如果使用带角度1的select,则需要使用ng-init,否则,将不会选择第二个选项,因为ng-model会覆盖默认选择的值

Name

Stars

Language

e15298c6a3b4591803e154ab0c3b3e2e.png

2 years ago

我使用这个php函数生成选项,并将其插入到我的HTML中

# code to output a set of options for a numeric drop down list

# parameters: (start, end, step, format, default)

function numericoptions($start, $end, $step, $formatstring, $default)

{

$retstring = "";

for($i = $start; $i <= $end; $i = $i + $step)

{

$retstring = $retstring . '

$retstring = $retstring . 'value="' . sprintf($formatstring,$i) . '"';

if($default == $i)

{

$retstring = $retstring . ' selected="selected"';

}

$retstring = $retstring . '>' . sprintf($formatstring,$i) . '

';

}

return $retstring;

}

?>

然后在我的网页代码中我使用它如下;

如果每次加载页面时都从_POST变量创建$ endmin(并且此代码位于发布的表单内),则默认情况下会选择先前选择的值 .

e15298c6a3b4591803e154ab0c3b3e2e.png

2 years ago

为要作为默认选项的选项设置 selected="selected" .

3

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值