Include select value first in option "select."

2021-01-11 05:22 jiyanyasli imported from Stackoverflow

Select first I want the value to come. how can I do it?

                $.each(data.departmentList, function (key, value) {
                    $('#searchDepartmentName')
                        .append($("<option></option>")
                            .attr("value", value.mudurlukId)
                            .text(value.mudurlukAdi));
                });
               
                $('#searchDepartmentName').append(optionData);
            },  ```

2 answers

answered 2021-01-11 05:43 D. Seah

you can set the selected attribute accordingly.

const data = {
  departmentList: [
    {mudurlukId: "1", mudurlukAdi: "test1"},
    {mudurlukId: "2", mudurlukAdi: "test2"}
  ]
};

$('#searchDepartmentName').html(data.departmentList.map((v, i) => {
    const selected = i === 0 ? " selected" : "";
  return `<option ${selected} value=${v.mudurlukId}>${v.mudurlukAdi}</option>`;
}));

<head>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
</head>
<body>
<select id="searchDepartmentName">
</select>
</body>

answered 2021-01-11 05:46 cmaresh

This will set the first option to be selected:

$.each(data.departmentList, function (key, value) {
  const select = $('#searchDepartmentName');
  const elem = $("<option></option>")
    .attr("value", value.mudurlukId)
    .text(value.mudurlukAdi);
  
  select.append(elem)
  
  if (elem.is(":first-child")) {
    select.val(value.mudurlukId);
  }
});

See also questions close to this topic

Accessing jasmine with testRunner set to jest-circus results in: ReferenceError: jasmine is not defined

On default jest allows you to simply access jasmine globally. But as soon as you switch the testRunner to jest-circus, jasmine is undefined. Following is a minimal, reproducible example:

babel.config.js

module.exports = {
  presets: [["@babel/preset-env", { targets: { node: "current" } }]],
};

jasmine.spec.js

it("check jasmine", () => {
  console.log(jasmine);
});

jest.config.js

module.exports = {
  rootDir: ".",
  testRunner: "jest-circus/runner",
};

package.json

{
  "name": "test-jest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "babel-jest": "^26.6.3",
    "jest": "^26.6.3",
    "jest-circus": "^26.6.3"
  }
}

Running this test will cause following output:

$ npm test

> test-jest@1.0.0 test /Users/yusufaran/Projects/test/test-jest
> jest

 FAIL  ./jasmine.spec.js
  ✕ check jasmine (1 ms)

  ● check jasmine

    ReferenceError: jasmine is not defined

      1 | it("check jasmine", () => {
    > 2 |   console.log(jasmine);
        |               ^
      3 | });
      4 | 

      at Object.<anonymous> (jasmine.spec.js:2:15)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        1.01 s
Ran all test suites.
npm ERR! Test failed.  See above for more details.

If you remove/comment the testRunner line in jest.config.js (so it fallbacks to the default runner) it works as expected.

Question

How can I access global jasmine object with testRunner set to jest-circus/runner? If I can't, why?

Generate EV certificate to nodeJS server

Hello everybody I have an angularJS project that hosted on GoDaddy, also I have server side using nodeJS by Gen4 VPS Linux from GoDaddy... I have a problem in my project that when I send request to the server I get reject because the server is self signed certificate and I need to accept the browser to log in to the server, Can somebody help me to get an certificate that will allow me to send request to the server without accepting it by the browser?

const express = require('express');
const cors = require('cors');
var sql = require("mssql");
const app = express();
const bodyParser = require("body-parser");
const https = require("https");
const path = require("path");
const fs = require("fs")

app.use(cors())
app.use(express.json()) 

app.use(bodyParser.json({
    limit: '50mb'
  }));
  
  app.use(bodyParser.urlencoded({
    limit: '50mb',
    parameterLimit: 1000000,
    extended: true 
  }));

....


const sslServer = https.createServer({
    key: fs.readFileSync(path.join(__dirname, 'cert', 'generated-private-key.pem.txt')),
    ca: [
        fs.readFileSync(path.join(__dirname, 'cert', '422f9963d338e48.crt')),
        fs.readFileSync(path.join(__dirname, 'cert', 'gd_bundle-g2-g1.crt'))
    ],
    cert: fs.readFileSync(path.join(__dirname, 'cert', 'generated-csr.pem.txt'))
}, app)
sslServer.listen(3443, () => console.log('Secure server is running on port 3443'))
....

Using a variable for a createDrawerNavigation

I am working on a simple React Native e-commerce app and i ran into a issue. I am trying to add the option to change the language, and it has worked so far with the Redux but now i need to dynamically change the sidebar menu and I cant because it is hardcoded as a prop.The code for the menu is this.

const ShopNavigator = createDrawerNavigator(
  { 
    Produktetee: ProductsNavigator,
    Rezervimet: OrdersNavigator,
    Postoni: AdminNavigator},
  {
    contentOptions: {
      activeTintColor: MyColors.primary
    },
    contentComponent: props => {
      const {log_out} = useSelector(state =>  state.language)
   
      const dispatch = useDispatch();
      return (
        <View style={{ flex: 1, paddingTop: 50 }}>
          <SafeAreaView forceInset={{ top: "always", horizontal: "never" }}>
            <DrawerItems {...props} />
            <Button
              title={log_out}
              color={MyColors.primary}
              onPress={() => {
                dispatch(authActions.logOut());
                // props.navigation.navigate("Auth");
              }}
            />
             <View style={{flexDirection: 'row'}}>
 <View style={{flex:1 , marginRight:10, marginTop: 5,}} >
            <Button
              title="English"
              type="outline"
            
              color={MyColors.primary}
              onPress={()=>{
                dispatch(index.selectLanguage(languages.english))
              }}
            />
            </View>
            <View style={{flex:1, marginTop: 5,}} >
            <Button
              title="Shqip"
              type="outline"
     
              color={MyColors.primary}
              onPress={()=>{
                dispatch(index.selectLanguage(languages.albanian))
              }}
            />
            </View>
 </View>
          </SafeAreaView>
        </View>
      );
    }
  }
);

I am trying to use the hook, but I can't. If somebody could help me I would be very grateful.

How to change position of dropdown, if menu is not fit on the screen jQuery

I work with dropdown menu, and this dropdown i have on the table.

But if is not enough place to open dropdown, it's not visible:

So i want to open this menu in up side, if in the bottom is no place enough, how i can do this?

My code - jsFiddle

Code for opening dropdown:

$(document).ready(function () {

    Array.from(document.querySelectorAll('.custom-style')).forEach(function (menu_side) {
        menu_side.onclick = ({
            target
        }) => {
            if (!target.classList.contains('more')) return
            document.querySelectorAll('.dropout.active').forEach(
                (d) => d !== target.parentElement && d.classList.remove('active')
            )
            target.parentElement.classList.toggle('active');
        }

    });

});

I try to use few methods, but it's not works for me, now i sutck i have not idea how to fix this.

how to create a dependent drop down list using angular?

I have a drop down list with the product names and now I want to create another drop down list which will display product sub types depending on the product selected. For example if the product name laptop is selected from a drop down list, I want to display another drop down list which contains names of laptops. How do I do this without making any changes to the backend?

export class Service {

  constructor(protected httpClient: HttpClient) {

  }

  public getTemplateData(start:number,limit:number):Observable<any>{
    return this.httpClient.post('/p-services/atomic-services/TemplateData',{
      startIndex:start,
      pageLimit:limit
    });
  }

export class ConfigManagerComponent {

  productData:any;
  totalRecords: number = 0;
  pageSize: number = 5;
  startIndex: number = 0;
  pageIndex: number;
DROPDOWN_LIST: templateData[]; 
  
  constructor(private Service: Service, private _formBuilder: FormBuilder,  private dialog: MatDialog) { }

  ngOnInit() {

  CodeNextBtn() {
          this.Service.getTemplateData(0,this.pageSize).subscribe(
            (templateResponse) =>{
              this.productData=         //binding database values to productData
  templateResponse.productData;
              this.totalRecords=templateResponse.totalRecords;
              this.referenceShowProgressBar
              this.DROPDOWN_LIST = templateResponse.productData;
  

            },
             (error) => {
              console.error(error);
              this.referenceShowProgressBar = false;
            }
            
          );

        } 

}

export class templateData{
  name?: string;
  sub_type?:string;
access_type?:string;
 
}

<mat-card style="margin-top: 10px;" *ngIf="showDetails">
  <div>
    <h1 class="header-result"> Data</h1>
  </div>

  <form [formGroup]="templateDataFormGroup" fxLayout fxLayout.xs="column" fxLayoutGap="10px">



<mat-form-field appearance="fill">
  <mat-label>Product Name</mat-label>
  <select matNativeControl >
    <option *ngFor="let DROPDOWN_LIST of DROPDOWN_LIST" [value]="DROPDOWN_LIST.product_name"
      [selected]="DROPDOWN_LIST.product_name">
      {{DROPDOWN_LIST.product_name}}
    </option>
  </select>
</mat-form-field>
</form>
</mat-card>

Complex HTML5 audio player for playlists

I need to expand my audio player, to play files from list A to list B. Currently it just opens from list A only.

The lists are connected, something like Bible book, and then chapter, so the final idea like to play from Genesis 1 to Ruth 12.. This is what I reached so far but I can't figure out how to make a second list so it plays from/to that list.

jsfillde so far: https://jsfiddle.net/d5g8w4cn/2/

The output should be like:

HTML:

<label for="from">From:</label>
<select id="from">
  <option value="">- Numbers -</option>
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<label for="to">&nbsp;&nbsp;&nbsp;&nbsp;To:</label>
<select id="to">
  <option value="">- Letters -</option>
  <option value="6">A</option>
  <option value="7">B</option>
  <option value="8">C</option>
</select>

<br/><br/>
 
<audio id="player" controls="controls">
  <source id="mp3_src" src="https://www.bunyangmauel.com/g5/plugin/kcaptcha/mp3/basic/0.mp3" type="audio/mp3" />
</audio>

JS:

$(document).ready(function() {

    var audioUrls = [
    "https://www.bunyangmauel.com/g5/plugin/kcaptcha/mp3/basic/0.mp3",
    "https://www.bunyangmauel.com/g5/plugin/kcaptcha/mp3/basic/1.mp3",
    "https://www.bunyangmauel.com/g5/plugin/kcaptcha/mp3/basic/2.mp3",
    "https://www.bunyangmauel.com/g5/plugin/kcaptcha/mp3/basic/3.mp3",
    "https://www.bunyangmauel.com/g5/plugin/kcaptcha/mp3/basic/4.mp3",
    "https://www.bunyangmauel.com/g5/plugin/kcaptcha/mp3/basic/5.mp3",
    "https://www.bunyangmauel.com/g5/plugin/kcaptcha/mp3/basic/6.mp3",
    "https://www.bunyangmauel.com/g5/plugin/kcaptcha/mp3/basic/7.mp3",
    "https://www.bunyangmauel.com/g5/plugin/kcaptcha/mp3/basic/8.mp3",      ]

  $('select').on('change', function() {
    var from = $("#from").val();
    var to = $("#to").val();
    if (!from || !to) return;
    var audio = $("#player");
    audio[0].pause();
    $("#mp3_src").attr("src", audioUrls[from]);    
    audio.data("currentidx", from);
    console.log(from)
    audio[0].load();
    audio[0].play();
  });
  
  $("#player").on("ended", function() {
    var from = $("#from").val();
    var to = $("#to").val();
    if (!from || !to) return;
    var audio = $("#player");
    var src = $("#mp3_src").attr("src", audioUrls[from]);    
    var currentIdx = audio.data("currentidx") || 1;
    currentIdx++;
    console.log(currentIdx)
    var to = $("#to").val() || 8;
    if(currentIdx <= to){
        $("#mp3_src").attr("src", audioUrls[currentIdx]);
      audio.data("currentidx", currentIdx)
      audio[0].load();
        audio[0].play();
    }
  })

});

How to display the respective contents for the option selected in vs-select in the context of VueJS

I am displaying certain options using vs-select of vuesax, the options are fed from the response coming from the API, Now whenever the user selects any of the options i want to display its respective contents.

Here is my code:

<div>
  <vs-select v-model="choose">
    <vs-select-item :key="i" v-bind="item" v-for="(item,i) in OwnOptions(employeedata.names)" />
  </vs-select>
</div>
    <div v-if="employeedata.names === 'raj' || employeedata.names === 'viraj' ">
        --rules and database--
    </div>
    <div v-if="employeedata.names === 'vicky' || employeedata.names === 'gopal|raj|vicky' ">
        --rules and database--
    </div>
<img :src="ImgUrl(this.$route.params.uid)" alt="ImagePhoto">
...
choose: null,
...
<script>
methods: {
  OwnOptions(val){
    return val.replaceAll('_', ' ').split('|')
  },
  ImgUrl (id) {
    return require(`./images/logo_${  id  }.png`)
  },

},
mounted () {
  this.$http.get(`/data-all/${  this.$route.params.uid}`)
    .then((r) => {this.employeedata = r.data})
    .catch((e) => {console.log(e)})
}
</script>

response.data:

[
          {
            "uid": 1,
            "names": "gopal|raj|vicky",
            "age": "35|25|22",
            "country": "india"
          },
          {
            "uid": 2,
            "name": "vicky",
            "age": "25",
            "country": "england"
          } 
          ...
    ]

Suppose say two options are displayed from vs-select, raj and vicky, if the user chooses vicky then the respective contents and the image of him(vicky) should be shown to the user. How can it be done?

Please help me in showing respective contents on select option from the vs-select.

Any option for calculation from select value
Below code is for showing options for tax and using value for calculation,
```
<td>
   <select name="taxgroup_id" id="taxgroup_id" class="form-control selectpicker taxgroup_id" data-live-search="true">
   @foreach($taxgroups as $g)
   <option value="{{ $g->taxgroup_id }}" {{$g->taxgroup_is_default ==  1 ? 'selected="selected"': ''}}>{{ $g->taxgroup_name }}</option>
   @endforeach
   </select>
</td>
<td>
 <input readonly type="text" name="bill_item_tax" id="bill_item_tax" class="form-control font-weight-bold bill_item_tax" style="border: 0;" value="">
</td>
```
I have to store taxgroup_id in DB, so i have given option value as taxgroup_id, but $taxgroups also contains taxgroup_value which need to be used for client-side tax calculation based on option selected,

Is there any solution to do the calculation on taxgroup_value based on option selected taxgroup_id?

otherwise, i need to get value from AJAX and do the calculation, but i want to use that option in last if nothing possible in client side,

Thanks,

Dynamic list of options

I am trying to create a dynamic list of options, I have an array where I contain the data I want. My idea is to make a for, giving it the length of the array and creating the options inside, but when doing so it doesn't work for me and it only creates an option.

addEventListener('load', inicio, false);

function inicio(){
var dato = document.getElementById("dato1").value;
var boton = document.getElementById("b_enviar");
var b_a = document.getElementById("b_crear");
var datos = new Array();

boton.addEventListener('click', function(){
    datos.push(document.getElementById("dato1").value);
    console.log(datos);
}, false);

b_crear.addEventListener('click', function(){
    var section1 = document.getElementById('section1');
    var section2 = document.getElementById('section2');
    var select = document.createElement('select');
    var option = document.createElement('option');
    
    var s1 = section1.appendChild(select);

    for (let index = 0; index < datos.length; index++) {
        s1.appendChild(option);
        console.log(index);
    }
    
}, false);
}

Related questions

Include select value first in option "select."

2 answers

See also questions close to this topic