Question

我需要将JSON存储在HTML Select对象中，并想知道它是否可能？

例如：

int a = 300 //The max value of a Byte is 256

byte b = (byte)a; //cast it to a byte, so take the remainder of 300 / 256.

//This produces 300 % 256, which is equal to 34.

JSFiddle示例：https://jsfiddle.net/rv7x38cw/

Answer 1

如HTMLOptionElement中所述：value DOMString反映值HTML属性的值（如果存在）;否则反映Node.textContent属性的值。

和

DOMString是UTF-16字符串。由于JavaScript已经使用了这样的字符串，因此DOMString直接映射到String。

所以，是的，你可以使用json值，但是这个值必须序列化为string：

JSON.parse（）将字符串转换为对象
JSON.stringify（）将json对象转换为字符串。

$(function () {
  $('#music').on('change', function() {
    var val = JSON.parse(this.value);
    console.log(val.mbid);
  });
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<select id="music" >
    <option value='{"mbid":123,"artist":"Judas Priest"}'>Heavy Metal 1</option>
    <option value='{"mbid":456,"artist":"Black Sabbath"}'>Heavy Metal 2</option>
    <option value='{"mbid":789,"artist":"Iron Maiden"}'>Heavy Metal 3</option>
    <option value='{"mbid":102,"artist":"Accept"}'>Heavy Metal 4</option>
</select>

Answer 2

请按以下方式修改HTML和JS代码：

https://jsfiddle.net/rv7x38cw/2/

HTML：

<select id="music">
  <option value='{"mbid":123,"artist":"Judas Priest"}'>Heavy Metal 1</option>
  <option value='{"mbid":456,"artist":"Black Sabbath"}'>Heavy Metal 2</option>
  <option value='{"mbid":789,"artist":"Iron Maiden"}'>Heavy Metal 3</option>
  <option value='{"mbid":102,"artist":"Accept"}'>Heavy Metal 4</option>
</select>

JS：

$('#music').on('change', function() {
  var str = this.value;
  alert(str);
  var val = $.parseJSON(str);
  alert(val);
  alert(val.mbid)
});

这里，关键变化是;你必须将value=' your JSON string '放在单引号中，并且每个JSON的键名必须用双引号括起来，如"mbid"

你也可以在下面的小提琴上结账。

    $('#music').on('change', function () {
        var str = this.value;
        alert(str);
        var val = $.parseJSON(str);
        alert(val);
        alert(val.mbid)
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="music">
    <option value='{"mbid":123,"artist":"Judas Priest"}'>Heavy Metal 1</option>
    <option value='{"mbid":456,"artist":"Black Sabbath"}'>Heavy Metal 2</option>
    <option value='{"mbid":789,"artist":"Iron Maiden"}'>Heavy Metal 3</option>
    <option value='{"mbid":102,"artist":"Accept"}'>Heavy Metal 4</option>
</select>

Answer 3

其中一种方法是将值作为字符串放置，例如：const gulp = require('gulp'); const del = require('del'); const runSequence = require('run-sequence'); const nodemon = require("gulp-nodemon"); const typescript = require('gulp-typescript'); const sourcemaps = require('gulp-sourcemaps'); const tscConfig = require('./tsconfig.json'); const tslint = require('gulp-tslint'); const concat = require('gulp-concat'); const uglify = require('gulp-uglify'); const SystemBuilder = require('systemjs-builder'); const argv = require('yargs').argv; const builder = new SystemBuilder('dist', './system.config.js'); // clean the contents of the distribution directory gulp.task('clean', function () { return del('dist/**/*'); }); // TypeScript Server compile gulp.task('compile', function () { return gulp .src(['src/**/*.ts']) .pipe(sourcemaps.init()) // <--- sourcemaps .pipe(typescript(tscConfig.compilerOptions)) .pipe(sourcemaps.write(".")) // <--- sourcemaps .pipe(gulp.dest("dist")); }); gulp.task('copy:libs', function () { // concatenate non-angular2 libs, shims & systemjs-config gulp.src([ 'node_modules/jquery/dist/jquery.min.js', 'node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/core-js/client/shim.min.js', 'node_modules/zone.js/dist/zone.js', 'node_modules/reflect-metadata/Reflect.js', 'node_modules/systemjs/dist/system.src.js', 'system.config.js', ]) .pipe(concat('vendors.min.js')) .pipe(uglify()) .pipe(gulp.dest('dist/libs')); return gulp.src([ './node_modules/@angular/**/*', './node_modules/angular2-in-memory-web-api/**/*', './node_modules/rxjs/**/*' ], { base: "./node_modules" }) .pipe(gulp.dest('dist/libs')) }); gulp.task('bundle', function () { return builder.buildStatic('app', 'dist/app/bundle.js') .then(function () { return del(['dist/app/**/*', '!dist/app/bundle.js']); }) .catch(function (err) { console.error('>>> [systemjs-builder] Bundling failed'.bold.green, err); }); }); gulp.task('copy:assets', function () { return gulp.src(['src/**/*', "index.html", '!src/**/*.ts']) .pipe(gulp.dest('dist')) }); gulp.task('nodemon', function () { nodemon({ script: "dist/index.js" }); }); gulp.task("watch", function () { return gulp.watch('src/**/*.*', ['compile']); }); gulp.task('tslint', function () { return gulp.src('src/**/*.ts') .pipe(tslint({ formatter: "verbose" })) .pipe(tslint.report()); }); gulp.task('build', function (callback) { runSequence('clean', 'compile', 'copy:libs', 'bundle', 'copy:assets', 'watch', 'nodemon', callback); }); gulp.task('default', ['build']);并使用{mbid:456,artist:'Black Sabbath'}或$.parseJSON(val)访问元素：

JSON.parse(val)

选择框值中的JSON

3 个答案: