• MobileSelect.js

  A mobile terminal linkage plug-in, which supports single selection, multiple selection and multi-level cascade. In general, we use a lot of it to realize non linkage single selection, non linkage double selection and linkage double selection

• Non linked radio

<link rel="stylesheet" type="text/css" href="css/mobileSelect.css">
<script src="js/mobileSelect.js" type="text/javascript"></script>

<div id="btn1">
<script type="text/javascript">
var mobileSelect1 = new MobileSelect({
    trigger: '#btn1', 
    title: 'Non linked radio',  
    wheels: [
                {data:['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']}
            ],
});
</script>

The effect is as follows:

• Non linkage double selection

<link rel="stylesheet" type="text/css" href="css/mobileSelect.css">
<script src="js/mobileSelect.js" type="text/javascript"></script>

<div id="btn2">
<script type="text/javascript">
var mobileSelect1 = new MobileSelect({
    trigger: '#btn2', 
    title: 'Non linkage double selection',  
    wheels: [
                {data:[
                    {id:'1',value:'Monday'},
                    {id:'2',value:'Tuesday'},
                    {id:'3',value:'Wednesday '},
                    {id:'4',value:'Thursday'},
                    {id:'5',value:'Friday'},
                    {id:'6',value:'Saturday'},
                    {id:'6',value:'Sunday'}
                ]},
                {data:[
                    {id:'1',value:'Attend class;class begins'},
                    {id:'2',value:'Having dinner'},
                    {id:'3',value:'Watch movie'},
                    {id:'4',value:'Run'},
                    {id:'5',value:'Video shooting'}
                ]}
            ],
});
</script>

The effect is as follows:

• Linkage selection

<link rel="stylesheet" type="text/css" href="css/mobileSelect.css">
<script src="js/mobileSelect.js" type="text/javascript"></script>

<div id="btn2">
<script type="text/javascript">
var mobileSelect1 = new MobileSelect({
    trigger: '#btn3', 
    title: 'Linkage selection',  
   wheels: [
    {data:[
            {
                id:'1',
                value:'nearby',
                childs:[
                    {id:'1',value:'One kilometer'},
                    {id:'2',value:'Two kilometers'},
                    {id:'3',value:'Three kilometers'},
                ]
            },
                {id:'2',value:'Yuhua District'},
                {id:'3',value:'Yuelu District'},
                {id:'4',value:'Furong district'},
            ]}
        ],
});
</script>

The effect is as follows:

• Key points:

• Today's demand: for example, non linkage radio chart, but it needs one row to display two data, one on the left and one on the right

• The best solution: directly modify the imported js data in the incoming data

<link rel="stylesheet" type="text/css" href="css/mobileSelect.css">
<script src="js/mobileSelect.js" type="text/javascript"></script>

<div id="btn1">
<script type="text/javascript">
var mobileSelect1 = new MobileSelect({
    trigger: '#btn1', 
    title: 'Please select a game character',  
    wheels: [
                {data:hero}, //hero is an array object
            ],
});
</script>

//In another js file
<script>
 hero.value = '<div style="width:100%;display:flex"><span style="flex:1">'+ game.name+'</span><span style="flex:1">'+game.time+'</span></div>'
//Game is the data obtained from the background. game.name and game.time are the two data to be displayed
</script>