select的练习，实现一个下拉选择语言

最新推荐文章于 2022-08-31 17:31:52 发布
最新推荐文章于 2022-08-31 17:31:52 发布
阅读量884 收藏
点赞数
分类专栏： HTML/CSS/JavaScript 文章标签： javascript html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35898865/article/details/104745860
版权

select的练习，实现一个下拉选择语言

在同一个文件夹里创建：index.html 和 core.js

HTML代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>语言选择框</title>
        <script src="./core.js"></script>
    </head>
    <body>
        <table width="100%" height="100%">
            <tr>
                <td>
                    <h1>
                        <span id="title">blockly模块转代码</span>
                    </h1>
                </td>
                <td class="farSide">  <!--这里的class属性是使用style.css里面的.farSide样式-->
                    <select id="languageMenu">
                       <!--<option value="1">简体中文</option>-->     
                    </select>
                </td>
            </tr>
        </table>
        <!--
        <script>
            var languegeMenu = document.getElementById('languageMenu');
            languegeMenu.options.add(new Option('text1','value'));
        </script>
        -->
    </body>
</html>

javascript代码:

// "严格模式"是一种在JavaScript代码运行时自动实行更严格解析和错误处理的方法。这种模式使得Javascript在更严格的条件下运行。
'use strict'

var Code = {};  //创建一个空对象

Code.LANGUAGE_NAME = {  //给Code添加属性，用于装载语言名称
  'ar': 'العربية',
  'be-tarask': 'Taraškievica',
  'br': 'Brezhoneg',
  'ca': 'Català',
  'cs': 'Česky',
  'da': 'Dansk',
  'de': 'Deutsch',
  'el': 'Ελληνικά',
  'en': 'English',
  'es': 'Español',
  'et': 'Eesti',
  'fa': 'فارسی',
  'fr': 'Français',
  'he': 'עברית',
  'hrx': 'Hunsrik',
  'hu': 'Magyar',
  'ia': 'Interlingua',
  'is': 'Íslenska',
  'it': 'Italiano',
  'ja': '日本語',
  'kab': 'Kabyle',
  'ko': '한국어',
  'mk': 'Македонски',
  'ms': 'Bahasa Melayu',
  'nb': 'Norsk Bokmål',
  'nl': 'Nederlands, Vlaams',
  'oc': 'Lenga d\'òc',
  'pl': 'Polski',
  'pms': 'Piemontèis',
  'pt-br': 'Português Brasileiro',
  'ro': 'Română',
  'ru': 'Русский',
  'sc': 'Sardu',
  'sk': 'Slovenčina',
  'sr': 'Српски',
  'sv': 'Svenska',
  'ta': 'தமிழ்',
  'th': 'ภาษาไทย',
  'tlh': 'tlhIngan Hol',
  'tr': 'Türkçe',
  'uk': 'Українська',
  'vi': 'Tiếng Việt',
  'zh-hans': '简体中文',
  'zh-hant': '正體中文'
};


Code.initLanguage = function() {
    var languegeMenu = document.getElementById('languageMenu');
    //languegeMenu.options.add(new Option('text1','value'));
    for(var lang in Code.LANGUAGE_NAME)
    {
        languegeMenu.options.add(new Option(Code.LANGUAGE_NAME[lang]));
    }
}

Code.init = function() {
    Code.initLanguage();
}
//窗口加载完之后执行Code.init方法
window.addEventListener('load', Code.init);
蜗小侠
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html练习1文件资源下载
01-05
这个“html练习1文件资源下载”很显然是一个学习HTML的基础练习项目，旨在帮助初学者掌握HTML的基本结构和元素。下面将详细介绍HTML的一些核心概念和相关知识点。 1. HTML基本结构：HTML文档通常由<!DOCTYPE html>...
点击下拉框切换页面并显示在当前页（语言切换）
leng0920的博客
08-16 3716
默认html: &lt;div class="styled-select"&gt; &lt;select class="text-size20" id="status" onchange="MM_jumpMenu('parent',this)" &gt;
html页面如何实现中英文切换
dgnshmp的博客
11-04 2181
test.html文件： <html> <head> <script type="text/javascript" src="language.js"></script> <script type="text/javascript" src="test.js"></script> <script> var ...
html语言切换功能,jquery多国语言切换特效
weixin_26800111的博客
06-02 684
这是一款实现多国语言切换的jquery特效。在这个示例中，通过简单的js代码，实现包括中文和英文在内的7种不同国家语言的切换效果。使用方法在页面中引入jquery和style.css。HTML结构示例中，整个页面分为两个部分，一部分是选择语言的下拉列表框，另外一部分是显示文字的区域。 EN 简体中文 English (US) Deutsch Esp...
下拉列表框中进行语言切换
走在java的路途上
11-09 1499
各位大侠好,小弟有一事相求,现在我已经做到在下拉列表框中取到各种语言的值了,只是还没有实现从其中选择一种语言,页面就自动转换成这种语言,请问如何实现这样的功能? 我在.page中定义了这样一个组件:                        在.html中这样定义:                选择语言:
html语言中下拉表单,html实现下拉菜单
weixin_32380307的博客
05-30 2149
1 2 3 4 5 超文本标记语言，标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 超文本标记语言的结构包括“头”部分(英语：Head)、和“主体”部分(英语：Body)。select标签实现。 注：如果是联动下拉菜单的话，需要通过js动态处理select中的optionhtml+css+javascript 菜单单击式下拉菜单html 下拉...
html语言学习教程
02-22
HTML表单用于用户输入数据，`<form>`元素是基础，常用表单元素包括`<input>`（可输入文本、密码、复选框、单选按钮等）、`<textarea>`（多行文本输入）、`<select>`（下拉菜单）和`<button>`（按钮）。 八、响应式...
Introduction:这是一个介绍
04-07
表单是收集用户输入的重要手段，`<form>`元素是表单的基础，常用标签有`<input>`（各种类型的输入字段）、`<textarea>`（多行文本输入）、`<select>`（下拉列表）和`<button>`（按钮）。表单可以通过`action`属性...
CSSACCP6.0 HTML 第6章 课堂练习 及答案
05-08
`<form>`元素用于创建表单，与`<input>`（输入字段）、`<textarea>`（多行文本输入）、`<select>`（下拉列表）和`<button>`（按钮）一起使用，实现用户交互。 在第6章的课堂练习中，可能涵盖了创建响应式设计的概念...
albaixiu：阿里百秀练习
02-12
阿里百秀（Albaixiu）是一个练习平台，旨在帮助用户提升HTML等Web前端技术。在HTML这个标签下，我们可以推断出这个压缩包可能包含了一系列与HTML编程相关的练习项目或者教程。`albaixiu-master`这个文件名可能是项目...
html-jquery多语言选择下拉框
02-27
使用js判断用户流览器语言，然后导入相关的css进行显示。只需要简单修改就可以用于自己的项目。可用于pc端和移动端 web前端开发(深圳)群： 73269871
js下拉菜单语言选项简单实现
10-26
大家对下拉菜单并不陌生吧，下面为大家介绍下使用js实现下拉菜单语言选项，具体实现如下，喜欢的朋友可以看看
多语言支持的下拉框源代码
12-17
本程序实现一个ASP.NET2.0的下拉框组件，它支持多语言（本地化），并且非常简单易用，不需要写任何额外代码，它就能从对应的资源文件中加载不同语言的下拉框选项。
树莓派4B安装旧版本Ubuntu出现无法启动的情况
qq_41442695的博客
08-31 2323
佛说：我心如铁，坚不可摧。
树莓派 | “start4.elf: is not compatible” 问题解决
JifengZ9的博客
04-21 6839
如果树莓派刷写系统后出现如下问题： 此时可以前往如下网址，下载最新固件包。下载的固件包中包含很多文件，其中boot路径下为需要的部分。如果使用SD卡加载文件，只需利用读卡器读取SD卡，进入boot盘中，将固件替换为最新的内容即可。开机提示某一文件不可用，则将该与文件一同替换。即如果提示不可用，则将系统的boot盘中的与用下载的最新固件包中的相同文件替换即可。
Jquery多语言下拉控件，点击可实现跳转相应语言
litao6664的专栏
12-06 2481
$(document).ready(function () { //Define MultiLanguage var laugeYuan = ["zh_chs", "zh_tr", "en"]; var langeNowq = [""]; var langeNowj = [""]; var biaozhi = 0; function quyuyan
python selenium 下拉框选择_【selenium】基于python语言，如何用select选择下拉框
weixin_39785422的博客
12-11 1165
在项目测试中遇到了下拉框选择的控件，来总结下如何使用select选择下拉框：下图是Select类的初始化描述，意思是，给定元素是得是select类型，不是就抛异常。接下来给了例子：要操作这个select，先要定位到，然后再通过select_by_index 选择下拉框def __init__(self, webelement):"""Constructor. A check is made tha...
vue3封装一个Select下拉选择器组件
最新发布
09-19
### 回答1： 好的，我可以给你一些大致的步骤来帮助你封装一个 Vue 3 的下拉选择器组件。 1. 在你的 Vue 项目中新建一个文件，用来存放你的组件代码。 2. 使用 Vue 3 的 Composition API 创建一个函数，并在其中定义你需要的状态和行为。 3. 在组件的模板中使用你定义的状态和行为来渲染下拉选择器。 4. 在组件的 props 中定义可以传入的参数，例如可选项的列表，默认选中的选项等。 5. 在组件的 methods 中定义点击选项或者关闭下拉选择器时的行为。 6. 可以使用 v-model 指令将组件的 value 属性与外部的变量进行双向绑定，以便在组件内外进行数据的访问和修改。 7. 最后，在你的 Vue 应用中引入这个组件，并使用它。 希望这些步骤能帮到你。如果你有更具体的问题，可以再提问。 ### 回答2： 在Vue 3中封装一个Select下拉选择器组件可以按照以下步骤进行： 1. 创建一个名为Select的Vue组件，在组件中定义一个data属性，用来存储下拉列表选项的数据： ```javascript data() { return { options: ['选项1', '选项2', '选项3'], selectedOption: '' } }, ``` 2. 在组件的template中，使用select和option标签来渲染下拉选择器： ```html <template> <select v-model="selectedOption"> <option v-for="option in options" :key="option" :value="option">{{ option }}</option> </select> </template> ``` 3. 在组件中，使用props来接收父组件传递的选项数据和默认选中的选项： ```javascript props: { options: { type: Array, required: true }, selectedOption: { type: String, default: '' } }, ``` 4. 使用`v-model`指令将选中的选项绑定到selectedOption属性上，使得父组件可以通过v-model传递选中的选项： ```html <template> <select v-model="selectedOption"> <option v-for="option in options" :key="option" :value="option">{{ option }}</option> </select> </template> ``` 5. 最后，将Select组件导出，以便在父组件中使用： ```javascript export default { name: 'Select', data() { return { options: ['选项1', '选项2', '选项3'], selectedOption: '' } } } ``` 在父组件中使用Select组件时，可以通过props传递选项数据和默认选中项，并使用v-model来获取选中的值。例如： ```html <template> <div> <select v-model="selectedOption"> <option v-for="option in options" :key="option" :value="option">{{ option }}</option> </select> <p>你选择的选项是：{{ selectedOption }}</p> </div> </template> <script> import Select from './Select' export default { components: { Select }, data() { return { options: ['选项1', '选项2', '选项3'], selectedOption: '' } } } </script> ``` 这样，就实现了在Vue 3中封装一个Select下拉选择器组件。 ### 回答3： Vue.js 是一个用于构建用户界面的渐进式框架。Vue 3 是 Vue.js 的最新版本，它在性能和体验上做了很多改进。下面是一个使用 Vue 3 封装的 Select 下拉选择器组件的示例： ```html <template> <div class="select"> <div class="selected-item" @click="toggleDropdown">{{ selectedItem }}</div> <div class="dropdown" v-show="isOpen"> <div class="dropdown-item" v-for="option in options" :key="option" @click="selectOption(option)"> {{ option }} </div> </div> </div> </template> <script> import { ref } from 'vue' export default { name: 'Select', props: { initialValue: { type: String, default: '' }, options: { type: Array, default: () => [] } }, setup(props) { const isOpen = ref(false) const selectedItem = ref(props.initialValue) const toggleDropdown = () => { isOpen.value = !isOpen.value } const selectOption = (option) => { selectedItem.value = option isOpen.value = false } return { isOpen, selectedItem, toggleDropdown, selectOption } } } </script> ``` 这个组件接受两个 props：initialValue 和 options。initialValue 表示初始选中的选项，默认为空。options 表示下拉选择器的选项列表，默认为空数组。组件内部通过 ref 创建了 isOpen 和 selectedItem 两个响应式变量，isOpen 用于控制下拉框的显示和隐藏，selectedItem 存储当前选中的选项。toggleDropdown 方法用于切换下拉框的显示和隐藏，selectOption 方法用于选择选项并更新 selectedItem 的值。 使用这个组件只需在父组件中引入并传入适当的 props 即可：初始化选择值和选项列表。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值